0

Following is a task I have done using PHP GD. And I want to do similar thing in SVG. 

//Part One
$img = @imagecreatetruecolor(80, 80);
$red = imagecolorallocatealpha($img,255,0,0,0);
$green = imagecolorallocatealpha($img,0,255,0,60);

imagefilledrectangle($img, 0, 0, 80, 80, $red);    
imagealphablending($img, false);
imagefilledrectangle($img, 10, 10, 70, 70, $green);


//Part Two
$img2 = @imagecreatetruecolor(100, 100);
$blue = imagecolorallocatealpha($img2,0,0,255,0);
imagefilledrectangle($img2, 0, 0, 100, 100, $blue);

//Part Three
imagecopy($img2, $img, 10, 10, 0, 0, 80, 80);

//Part Four
header("Content-Type: image/png");
imagepng($img2);

Description:

  1. Part 1 (Creating First Image):-

a: Creates a 80px / 80px image,

b: Filled by Red Color,

c: Image's alphablending is made off.

d: Image's middle is filled with Green Color with Opacity.

  1. Part 2 (Creating Second Image):-

a. Creates a 100px / 100px image

b. image filled by blue color

  1. Part 3 (Copying Image):- First image is overlayed into second image in the center

  2. Part 4 (Display Image):- Displays the final image

Click here to see the image created by this code

The green part of first image is blended with the second image. But, Red part of first image didn't.

I want to exactly the same thing in SVG. How can I do that? How can I make an image object's alpahblending off, so the image behind this can be blended with the image over that image?

Update: Found something interesting to solve this problem. Tried the following SVG code:

<html><body>
<svg width="100" height="100">
    <defs>
        <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%"> 
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>

        <mask id="mask3" x="0" y="0" width="200" height="100" >
            <ellipse cx="50" cy="50" rx="100" ry="100" fill="url(#grad3)" />
        </mask>
    </defs>     
    <rect x="1" y="1" width="100" height="100" style="stroke: none; fill: #0000ff;"/>
    <rect x="10" y="10" width="80" height="80" style="stroke: none; fill: #ff0000; "/>
    <rect x="20" y="20" width="60" height="60" style="stroke: none; fill: #00ff00; mask: url(#mask3)"/>
</svg>
</body></html>

Third rectangle should display a color that is provided in the "Mask", now it is showing the gradient defined in mask but I have to provide the fill color. I want to show the exactly same color or gradient I have defined in mask. How can I do that?

Moin
  • 26
  • 3
  • You question is not very clear and I suggest you edit it to explain clearly what you are trying to achieve. What are you asking: can someone provide code to do the above, but output as SVG? Or, how to merge images with transparency in the code you posted? – timclutton Oct 17 '14 at 11:32
  • I need SVG alternative of the code I have posted. How to do the same thing in SVG. As I have got something in my studies, that I can use mask for doing this. I tried with something like this: – Moin Oct 17 '14 at 13:06
  • – Moin Oct 17 '14 at 13:15

0 Answers0