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
Related
Im trying to change a background color of svg rect that is filled with a pattern.
This is my simplified rect svg with a defined pattern:
<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="border">
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="20" style="stroke:blue; stroke-width:8" />
</pattern>
</defs>
<g>
<rect width="100" height="100" fill="url(#diagonalHatch)"/>
</g>
</svg>
Is it possible to change the rect background color (color will be changed in runtime) and not affect the pattern?
So for example I need a rect with yellow, orange, red background and blue diagonal hatch.
Solution proposed by #Robert Longson.
Just add another rect behind.
<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="border">
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
<line x1="0" y1="0" x2="0" y2="20" style="stroke:blue; stroke-width:8" />
</pattern>
</defs>
<g>
<rect width="100" height="100" fill="red" />
<rect width="100" height="100" fill="url(#diagonalHatch)"/>
</g>
</svg>
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 svg element with some image inside it. I tried clipPath, but the results were not as expected
here's the code
<svg width="5396" height="829" enable-background="new" version="1.1" viewBox="0 0 1427.7 219.34" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="headera" cx="-334.2" cy="-79.465" r="713.85" gradientTransform="matrix(.35196 -.0011319 .0010719 .334 127.5 106)" gradientUnits="userSpaceOnUse">
<stop stop-color="#9d6173" offset="0"/>
<stop stop-color="#594b4f" offset="1"/>
</radialGradient>
<clipPath id="dodol">
<rect x="36.286" y="108.01" width="0" height="0" fill-opacity="0" stroke="#453030" stroke-linecap="round" stroke-linejoin="round" stroke-width=".052917"/>
<path d="m-535.38 77.813v6.0476c2.9078 113.15 92.911 174.65 152.71 167.82 169.93-23.912 248.91 44.042 387.75 45.474 56.339-1.17 204.04-22.034 204.04-22.034 78.053-5.4634 100.32 22.158 142.53 22.034 181.38-0.15553 205.7-119.12 449.25-127.14 104.33-1.7411 90.846-92.203 90.846-92.203z" fill="url(#headera)"/>
</clipPath>
</defs>
<g transform="matrix(1 0 0 .99999 535.38 -77.81)">
<rect x="36.286" y="108.01" width="0" height="0" fill-opacity="0" stroke="#453030" stroke-linecap="round" stroke-linejoin="round" stroke-width=".052917"/>
<path d="m-535.38 77.813v6.0476c2.9078 113.15 92.911 174.65 152.71 167.82 169.93-23.912 248.91 44.042 387.75 45.474 56.339-1.17 204.04-22.034 204.04-22.034 78.053-5.4634 100.32 22.158 142.53 22.034 181.38-0.15553 205.7-119.12 449.25-127.14 104.33-1.7411 90.846-92.203 90.846-92.203z" fill="url(#headera)"/>
</g>
<image clip-path="url(#dodol)" preserveAspectRatio="xMaxYMid meet" width="643px" height="50%" x="250" y="20" xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
</svg>
the problem with the code is I can't resize the image as it should and some of the outgoing image that exceeds the svg element remains visible
what i want to achive is
the svg shape appears as the background for the image inside it
the image appereance clipped by svg shape
I can adjust the position and size of the image
thanks
I'm not very sure this is what you need. Please take a look.
The main idea is that you have to put the image inside the transformed group.
Also I've removed some useless elements (rects with width and height 0). Also instead of using the same path twice I'm reusing it with <use>
Yet another thing: I've changed the image size so that it keeps it's width/height ratio. It may not be what you want.
<svg viewBox="0 0 1427.7 219.34" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="headera" cx="-334.2" cy="-79.465" r="713.85" gradientTransform="matrix(.35196 -.0011319 .0010719 .334 127.5 106)" gradientUnits="userSpaceOnUse">
<stop stop-color="#9d6173" offset="0"/>
<stop stop-color="#594b4f" offset="1"/>
</radialGradient>
<clipPath id="dodol">
<path id="thePath" d="m-535.38 77.813v6.0476c2.9078 113.15 92.911 174.65 152.71 167.82 169.93-23.912 248.91 44.042 387.75 45.474 56.339-1.17 204.04-22.034 204.04-22.034 78.053-5.4634 100.32 22.158 142.53 22.034 181.38-0.15553 205.7-119.12 449.25-127.14 104.33-1.7411 90.846-92.203 90.846-92.203z" />
</clipPath>
</defs>
<g transform="matrix(1 0 0 .99999 535.38 -77.81)">
<use xlink:href="#thePath" fill="url(#headera)"/>
<image clip-path="url(#dodol)" width="600" height="529" x="250" y="20" xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"/>
</g>
</svg>
I'm new to svg (and design in general) and looking for a way to fill a svg shape/path with three equally-sized diagonal stripes in different colors. For two stripes, I already found a solution on Stack Overflow (Simple fill pattern in svg : diagonal hatching):
<svg width="300" height="30" viewBox="0 0 200 10">
<pattern id="diagonalHatch" width="15" height="10"
patternTransform="rotate(135 0 0)" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="100%" height="100%" fill="orange"></rect>
<line x1="0" y1="0" x2="0" y2="10" style="stroke:blue; stroke-
width:15" />
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>
I modified the solution somewhat, including a rectangle for background color (is there a better way to do this?). But I just can't figure out how to do it for three stripes. Another thing I also wondered is whether there is a way to pass the colors as some kind of parameters to the pattern, so that there is no need to declare multiple patterns just for color switching?
I've added a second line to your pattern. Also I've removed the attributes with a value == 0. If your stroke-width is 10 (for example) you will need to begin your line at 5 since a line is drawn 5 units to one side and 5 to the other side. I hope it helps.
<svg width="300" height="300" viewBox="0 0 200 200">
<pattern id="diagonalHatch" width="30" height="10"
patternTransform="rotate(130)" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="orange"></rect>
<line x1="5" x2="5" y2="10" style="stroke:blue; stroke-width:10" />
<line x1="15" x2="15" y2="10" style="stroke:red; stroke-width:10" />
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>
Another approach is to create your stripes using a repeating linear gradient.
<svg width="300" height="300" viewBox="0 0 200 200">
<defs>
<linearGradient id="diagonalHatch" gradientUnits="userSpaceOnUse"
x2="30" spreadMethod="repeat" gradientTransform="rotate(-45)">
<stop offset="0" stop-color="orange"/>
<stop offset="0.33" stop-color="orange"/>
<stop offset="0.33" stop-color="blue"/>
<stop offset="0.67" stop-color="blue"/>
<stop offset="0.67" stop-color="red"/>
<stop offset="1.0" stop-color="red"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>
I'm trying to recreate an iphone maps like push pin in SVG and I have the pin part down but I'm wondering how to tackle the shadow. I've seen a bunch of drop shadow examples but they're all just offsetting the original by a few pixels. Is it possible to apply a transform matrix to a filter so it's skewed?
Here's the pin SVG so far:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="SVGID_1_" cx="29.3623" cy="31.1719" r="11.6241" gradientTransform="matrix(1.1875 0 0 1.1875 -30.8438 -30.2812)" gradientUnits="userSpaceOnUse">
<stop offset="0.2637" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#6D0000"/>
</radialGradient>
</defs>
<rect x="9.251" y="13.844" fill="#CCCCCC" stroke="#7C7C7C" width="2" height="24.83"/>
<circle fill="url(#SVGID_1_)" stroke="#660000" cx="10.5" cy="11.5" r="9.5"/>
<ellipse transform="matrix(0.8843 0.4669 -0.4669 0.8843 4.475 -1.6621)" fill="#FFCCCC" cx="6.591" cy="8.199" rx="1.538" ry="1.891"/>
</svg>
thanks!
Here is a simple transform and filter to rotate it. If you want to do the skewing too you will need to replace the rotate line with some matrix stuff.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<radialGradient id="SVGID_1_" cx="29.3623" cy="31.1719" r="11.6241" gradientTransform="matrix(1.1875 0 0 1.1875 -30.8438 -30.2812)" gradientUnits="userSpaceOnUse">
<stop offset="0.2637" style="stop-color:#FF0000"/>
<stop offset="1" style="stop-color:#6D0000"/>
</radialGradient>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
</filter>
</defs>
<g id="pin">
<rect x="9.251" y="13.844" fill="#CCCCCC" stroke="#7C7C7C" width="2" height="24.83"/>
<circle fill="url(#SVGID_1_)" stroke="#660000" cx="10.5" cy="11.5" r="9.5"/>
<ellipse transform="matrix(0.8843 0.4669 -0.4669 0.8843 4.475 -1.6621)" fill="#FFCCCC" cx="6.591" cy="8.199" rx="1.538" ry="1.891"/>
</g>
<use xlink:href="#pin" transform="rotate(60 10.251 38.674)" filter="url(#drop-shadow)"/>
</svg>