I've got an SVG I'm trying to animate from bottom to top with a fill. I want it to start as color code #ddd and I want it to end as #ccc filling in from the bottom over a 1 second duration. I'm having problems getting this to work correctly as it seems to look a bit strange.
This is what I've got so far.
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#ddd"/>
<stop offset="50%" stop-color="#ccc">
<animate attributeName="offset" values="0;1;0" dur="1s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="1" stop-color="#ccc">
<animate attributeName="offset" values="0;1;0" dur="1s" begin="0s"/>
</stop>
</linearGradient>
<g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Do I need to add an additional stop to the linearGradiant animation?
Something like this.
If you want a duration of 1 second then that's what to write
Your values make the fill go up and down again
fill="freeze" makes the animated value remain after its duration is complete
Your colours don't match the ones you say you want
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Dashboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-color="#ccc"/>
<stop offset="0%" stop-color="#ccc">
<animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/>
</stop>
<stop offset="0%" stop-color="#ddd">
<animate attributeName="offset" to="100%" dur="1s" begin="0s" fill="freeze"/> </stop>
</linearGradient>
<g transform="translate(-1161.000000, -558.000000)" fill="url(#lg)" id="current-net-wealth">
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon id="Path" points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"></polygon>
</g>
</g>
</g>
</g>
</g>
</svg>
Related
I am trying to create an svg file with a circle that has a tapered stroke that fades, meaning the stroke width will be the thickest (say 20px) with the original color and will be the thinnest (say 3px) on the opposite side where the color has faded. I was able to create the circle with color fading with the gradient tool, but I am struggling to figure out how to change the stroke width
Here's the code I have so far, which I created in Photoshop and exported to svg.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: none;
stroke-width: 20px;
stroke: url(#a);
}
</style>
<linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
</defs>
<circle class="cls-1" cx="255.5" cy="255.5" r="184.5"/>
</svg>
Here's an image of what I am trying to do.
Sorry, one more favor. I am trying to create an icon, so it will have four of these circles with different colors, with one fading to the top as shown, another fading to the bottom, and the other two to each of the sides. I will really appreciate it if you can also show me how to rotate :)
Thank you in advance.
Regards,
Mike
I would draw a bigger circle with a hole inside. In this case I'm using a mask. You can also draw a holloed path. In both cases you are using the gradient as a fill not as a stroke
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500">
<defs>
<style>
.cls-1 {
fill: url(#a);
}
</style>
<linearGradient id="a" x1="255.5" y1="240" x2="255.5" y2="51" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
<mask id="m">
<circle id="c1" cx="255.5" cy="255.5" r="184.5" fill="white" />
<circle fill="black" cx="255.5" cy="245.5" r="164.5"/>
</mask>
</defs>
<circle cx="255.5" cy="255.5" r="184.5" class="cls-1" mask="url(#m)" />
</svg>
And this is an example where I'm using a holloed path instead of the masked circle. Please note that in this case I'm centering the path atound the point x=0 y=0.
<svg width="500" height="500" viewBox="-250 -250 500 500">
<defs>
<style>
.cls-1 {
fill: url(#a);
}
</style>
<linearGradient id="a" y1="200" y2="-200" x1="0" x2="0" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="rgba(96,0,0,1)"/>
<stop offset="1" stop-color="rgba(96,0,0,.1)"/>
</linearGradient>
</defs>
<path class="cls-1" d="M184.5,0A184.5,184.5 0 0 1 -184.5,0A184.5,184.5 0 0 1 184.5,0M164.5,-10A164.5,164.5 0 0 0 -164.5,-10A164.5,164.5 0 0 0 164.5,-10"/>
</svg>
I am trying to create an icon, so it will have four of these circles
with different colors, with one fading to the top as shown, another
fading to the bottom, and the other two to each of the sides. I will
really appreciate it if you can also show me how to rotate
The first circle rotates clockwise
<animateTransform
attributeName="transform"
type="rotate"
values="0 150 150;360 150 150"
begin="svg1.click"
dur="10s"
repeatCount="indefinite"
/>
The second circle rotates counterclockwise.
Since the top circle is set to the opacity parameter fill-opacity: 0.5;
then the effect of changing the thickness of the stroke is created
Added gradient animation to both circles:
<animate
attributeName="stop-color"
dur="1.5s"
values="red;yellow;red"
repeatCount="indefinite"
/>
The text Click me has been added for demonstration it can be removed.
Below is the complete code:
.container {
width:50%;
height:50%;
}
svg {
background:black;
}
#path1 {
fill:url(#gradl);
stroke:none;
fill-opacity:1;
}
#path2 {
fill:url(#grad2);
stroke:none;
fill-opacity:0.5;
}
#crc1 {
stroke:none;
fill:black;
}
#txt1 {
fill:url(#grad2);
}
<div class="container">
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 300 300" >
<defs>
<linearGradient id="gradl" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="red" stop-opacity="0.9">
<animate
attributeName="stop-color"
dur="1.5s"
values="red;yellow;red"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" stop-color="yellow">
<animate
attributeName="stop-color"
dur="1.5s"
values="yellow;red;yellow" repeatCount="indefinite"
/>
</stop>
</linearGradient>
<linearGradient id="grad2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="lime">
<animate
attributeName="stop-color"
dur="1.5s"
values="lime;purple;lime"
repeatCount="indefinite"
/>
</stop>
<stop offset="100%" stop-color="purple">
<animate
attributeName="stop-color"
dur="1.5s"
values="purple;lime;purple" repeatCount="indefinite"
/>
</stop>
</linearGradient>
</defs>
<path id="path1" d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
<animateTransform
attributeName="transform"
type="rotate"
values="0 150 150;360 150 150"
begin="svg1.click"
dur="10s"
repeatCount="indefinite"
/>
</path>
<path id="path2" transform="rotate(45 150 150)"
d="M71.9 78.4C90.8 58.1 122.9 50.7 150.6 51.5c26.2 0.7 54.9 10.5 72.8 29.7 16.9 18.1 22.9 45.8 23.4 70.6 0.5 25.1-3.2 54.4-20.7 72.4-18.5 19.1-49.4 24.5-76 24.3-25.4-0.2-54.4-6.3-72.4-24.3C59.5 205.8 53.9 176.5 53 150.8 52.2 125.9 55 96.7 71.9 78.4Z" >
<animateTransform
attributeName="transform"
type="rotate"
values="360 148 148;0 148 148"
begin="svg1.click"
dur="10s"
repeatCount="indefinite" />
</path>
<circle id="crc1" cx="150" cy="150" r="90" />
<text id="txt1" x="80" y="160" font-size="36" font-weight="700" > Click me </text>
</svg>
</div>
I'm studying SVG now and got stuck at Radial gradients topic, on moving radial gradient center exactly. Let's say, I have 2 gradient examples (codepen snippet to play around). A basic one (works perfectly):
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye)"/>
</svg>
and an example where I'm trying to apply fx and fy attributes to move gradient focal point:
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye2" cx="50%" cy="50%" r="10%" fx=".2" fy=".2" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye2)"/>
</svg>
Here it somehow just cut a piece of shape instead of just moving a center point.
Could you please explain what am I doing wrong here and why it works in a such strange way?
There are two main concepts when defining a radial gradient:
The point where the gradient begins ("focal point")
The ellipse which defines the "outer" shape of the gradient
I'll mention the "repeat" option later, but for now: The gradient is rendered from the focal point outwards until it reaches the outer shape. Maybe it helps to imagine the outer shape shrinking until it reaches the focal point.
This means that if the focal point is inside the defined shape, it will appear fairly intuitive:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
fx="0.35" fy="0.35">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="45" cy="45" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
(example taken from MDN, fixed slightly and tweaked)
However, if the focal point is outside the boundary shape, you end up with something more like a cone:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
fx="0.05" fy="0.05">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="15" cy="15" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="28" y="30" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
Notice that it still takes the circle and "shrinks" it down towards the focal point, but because the focal point is now outside the circle, it cannot define any meaningful colour for the points outside the cone.
You move the focal point with fx and fy. There is also fr which is useful sometimes but ignore it for now; you can do the same with colour stop positions anyway.
You move the circle with cx, cy and r.
Moving both has the effect of just translating the gradient.
Repeat makes this a bit more confusing, but maybe this demo will clarify:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.3"
fx="0.4" fy="0.4" spreadMethod="repeat">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="30" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="50" cy="50" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
The white circle still defines the shape, so for an intuitive result, the focal point should be inside it.
In the example you posted, the gradient itself is very small; occupying just a 10-pixel radius around the centre. It defines a single colour transition. The striped effect is due to the repeat option. Here's your example with the focal point and outer shape illustrated:
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" fill="url(#bullseye)"/>
<circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="50%" cy="50%" r="2" fill="white" stroke="white"/>
</svg>
and here's your second example (focal point shown in black this time for clarity):
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" fx=".2" fy=".2" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" fill="url(#bullseye)"/>
<circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="20%" cy="20%" r="2" fill="black" stroke="black"/>
</svg>
I have two svg animations and I want to start #anim-join-gradient animation on the end of #anim-vert-gradient, but #anim-join-gradient animation doesn't start.
#anim-join-gradient element has attribute begin="anim-vert-gradient.end"
.box1{width:25px}
<div class="box box1">
<svg viewbox="0 0 100 100">
<path id="button" class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" />
</svg>
</div>
<svg id="play-vert-line" width="110" height="110">
<defs>
<linearGradient id="vert-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
<stop stop-color="#1689fb"></stop>
<stop stop-color="#7e7e7e"></stop>
<animate xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vert-gradient" id="anim-vert-gradient" attributeName="y1" dur="800ms" to="99%" begin="button.click" fill="freeze"></animate>
</linearGradient>
</defs>
<line id="vert-line-1" x1="55.3" y1="0" x2="55.3" y2="105" stroke="url(#vert-gradient)" stroke-width="2"></line>
</svg>
<svg id="line-join" width="110" height="110">
<defs>
<linearGradient id="vert-join-gradient" gradientUnits="userSpaceOnUse" y1="0%" y2="100%" x1="0" x2="0">
<stop stop-color="#1689fb"></stop>
<stop stop-color="#7e7e7e"></stop>
<animate xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#vert-join-gradient" id="anim-join-gradient" attributeName="y1" dur="400ms" from="0%" to="99%" begin="anim-vert-gradient.end" fill="freeze"></animate>
</linearGradient>
</defs>
<line id="vert-line-2" x1="105" y1="0" x2="105" y2="105" stroke="url(#vert-join-gradient)" stroke-width="2"></line>
</svg>
minus signs are treated specially in begin attributes. Unescaped minus signs are treated as the subtraction operator. Per the spec you need to escape them if you don't want that e.g.
begin="anim\-vert\-gradient.end"
That would work on Firefox. Chrome has a bug and doesn't support escaping so if you want it to work there you'd have to remove the - signs.
This question already has answers here:
Outlining and partially filling an SVG Shape
(3 answers)
Closed 7 years ago.
<svg viewbox="-20 -20 100 100">
<circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2">
</svg>
How to fill the circle as below based on percentage!!
http://i.stack.imgur.com/gVAN5.png
Thanks in advance.
you could use a gradient with stop-opacity to do this.
you would add two "middle" stops with opacity 0 and 1 respectively an set the offset of both to the percentage you need.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="0" stop-color="royalblue"/>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>
you could even animate it
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>
the advantage is that this works on any shape and size without changing the gradient
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="400" height="200">
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="0" stop-color="royalblue"/>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<circle cx="50" cy="50" r="45" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
<circle cx="250" cy="150" r="145" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
<rect x="400" y="20" width="100" height="100" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
<path d="M50 150L95 290 h-90z" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
<path d="M450 205 A45 45 0 0 1 450 295A100 100 0 0 0 450 205z" fill="url(#lg)" stroke="crimson" stroke-width="5"/>
</svg>
The easiest way to do this is to create a mask with a circular hole in it, and then animate a rectangle behind it. For example:
<path fill="#fff" fill-rule="evenodd"
d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z"/>
The path data here starts with a square box 200 units wide (M0 0 200 0 200 200 0 200Z) and then uses two arcs to draw a circle of diameter 80 units inside it (A80 80 0 0 0 180 100 80 80 0 0 0 20 100Z). The evenodd fill rule ensures that the circle is cut out from the square.
If you want the circle to fill from bottom to top, then you'll have to use a rotate transformation:
<rect transform="rotate(180 100 100)" x="20" y="20" width="160" height="0" fill="#47f" id="fillup"/>
This spins the coordinate system around the middle of the SVG image so that the rect grows upwards when you increase its height. Here, I'm using a CSS transition to change the height of the rect when you hover over it. But you can use Javascript or JQuery to change the height to whatever you want.
Here's a working example:
svg #fillup { height:0px; transition:height 0.5s; }
svg:hover #fillup { height:160px; }
<svg width="200" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="180" height="180" fill="#eee"/>
<rect transform="rotate(180 100 100)" x="20" y="20"
width="160" height="0" fill="#47f" id="fillup"/>
<path fill="#fff" fill-rule="evenodd"
d="M0 0 200 0 200 200 0 200ZM20 100 A80 80 0 0 0
180 100 80 80 0 0 0 20 100Z"/>
<circle cx="100" cy="100" r="90" fill="none" stroke="#888"
stroke-width="20"/>
<circle cx="100" cy="100" r="99" fill="none" stroke="#333"
stroke-width="1"/>
<circle cx="100" cy="100" r="80" fill="none" stroke="#333"
stroke-width="1"/>
</svg>
View this SVG in the latest version of Chrome and Safari.
In Safari, you will see a colorful fill. In Chrome, the fill doesn't render.
Any ideas on how I can fix this bug? It seems to be a new bug from the latest Chrome release (https://code.google.com/p/chromium/issues/detail?id=452235)
I removed the d coordinates for to be concise
<?xml version="1.0" standalone="no"?>
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="Gradient1">
<stop offset="5%" stop-color="white"/>
<stop offset="95%" stop-color="blue"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="red"/>
<stop offset="95%" stop-color="orange"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
<rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
<circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
</pattern>
</defs>
<g typename="Graphic" artname="PRAYING HANDS" min_size_x="0" min_size_y="0" size_locked="false" transform="matrix(1 0 0 1 100 100)"><g artname="PRAYING HANDS" data-artwork-id="1041" transform="">
<title>Praying Hands</title>
<g transform="matrix(1 0 0 -1 -2401 2972)" style="text-rendering:optimizeLegibility;shape-rendering:default;image-rendering:optimizeQuality" artname="PRAYING HANDS" data-artwork-id="1041">
<path fill="url(#Pattern)" d="..." opacity="1"></path>
</g>
</g>
<!-- outline -->
<g transform="matrix(1 0 0 -1 -2400.16 2971.63)" style="text-rendering:optimizeLegibility;
shape-rendering:default;
image-rendering:optimizeQuality" artname="PRAYING HANDS" data-artwork-id="1041">
<desc>Untitled</desc>
<path style="fill:purple;stroke:#000000;fill-rule: evenodd;stroke-width:0.000001" d="..." fill="none" opacity=""></path>
</g>
</g>
</svg>
This is a known bug in Chrome.
https://code.google.com/p/chromium/issues/detail?id=447707
Looks like it will be fixed in Chrome 41.
This is somehow caused by transforming the to-be-filled things or their parents, try without it. For my case, a "scale(-1,1)" caused the issue. I worked around this by doing the transformation manually, which is easy for scale(-1,1). Translates & rotates where no issues.
Cheers,
Kay