Does anyone know why does this SVG:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 412" fill="none">
<path id="path1" d="M0 130L192 89L384 64L576 57L768 125L960 37L1152 99L1344 0L1536 124L1728 131L1920 36V412H1728H1536H1344H1152H960H768H576H384H192H0V130Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path2" d="M0 142L192 131L384 122L576 162L768 116L960 102L1152 176L1344 123L1536 186L1728 76L1920 103V412H1728H1536H1344H1152H960H768H576H384H192H0V142Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path3" d="M0 234L192 194L384 265L576 253L768 252L960 209L1152 218L1344 263L1536 200L1728 260L1920 223V412H1728H1536H1344H1152H960H768H576H384H192H0V234Z" fill="url(#paint0_linear_1186_28)" fill-opacity="0.4"/>
<path id="path4" d="M0 274L192 331L384 325L576 303L768 269L960 330L1152 310L1344 297L1536 308L1728 331L1920 320V412H1728H1536H1344H1152H960H768H576H384H192H0V274Z" fill="url(#paint0_linear_1186_28)"/>
<defs>
<linearGradient id="paint0_linear_1186_28" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FF00E5"/>
<stop offset="1" stop-color="#00E0FF"/>
</linearGradient>
</defs>
</svg>
Render with this line around the middle in safari?
Also when i tried to add morphing animation to it there were multiple lines appearing seemingly randomly and a lot. I'd appreciate any help regarding this. Thanks in advance.
The issue was resolved by updating safari from version 16.2 to 16.3. So the problem wasn't with the SVG but rather with webkit/safari.
Related
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>
There is such an iridescent text based on linear-gradient made in svg, but also noticed errors ... visually:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 193 80">
<defs>
<linearGradient id="linearGradient914">
<stop id="stop910"
offset="0"
style="stop-color:yellow;" />
<stop id="stop912"
offset="1"
style="stop-color:red;" />
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="168.58255"
x2="-127.96807"
y1="168.58255"
x1="-227.84294"
id="linearGradient916"
xlink:href="#linearGradient914" />
</defs>
<g transform="translate(210.09778,-163.31157)" id="layer1">
<text transform="scale(0.92185611,1.084768)" id="text817" y="178.24792" x="-228.11203" style="font-size:41px;line-height:41px;">
<tspan style="font-family:Gabriola;fill:url(#linearGradient916);" y="178.24792" x="-228.11203" id="tspan815">FREEDOM</tspan>
</text>
</g>
</svg>
As seen in the text ragged edges as if this is a bitmap graphics in Google Chrome, but in Firefox and IE11 this is not ...
I changed the font size and the same font family and the situation does not change ... probably the only problem I have
What should I do that would not Google Chrome have a ragged edge in the text?
The solution was to convert the font to Bezier curves and everything was displayed perfectly
in solving the problem helped moskus
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
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>
Is there a way to do an 'angular gradient' in SVG?
(I don't know the official term -- it's the kind of gradient you see in color-pickers, where it varies by angle.)
SVG seems to support only linear and radial gradients, but I'm thinking there might be some way to use a transform to simulate what I want.
thanks!
...10 years later...
CSS now supports conical gradients, although browser support is mixed at the time of writing this.
You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect.
https://codepen.io/eastonium/pen/abOpdEm
There's no standard support to do angular (conical) gradients.
But see http://wiki.inkscape.org/wiki/index.php/Advanced_Gradients#Conical_gradient for some approximation methods (source code not included, though). Examples on that link do not work.
Here is how to do it using patterns: https://jsfiddle.net/prozoroff/8eodzrke/
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<defs>
<linearGradient id="Gradient1" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="Gradient2" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<pattern id="Pattern" x="0" y="0" width="600" height="600" patternUnits="userSpaceOnUse">
<g transform="rotate(0, 300, 300)">
<rect shape-rendering="crispEdges" x="0" y="0" width="300" height="600" fill="url(#Gradient1)"/>
<rect shape-rendering="crispEdges" x="300" y="0" width="300" height="600" fill="url(#Gradient2)"/>
</g>
</pattern>
</defs>
<path id='arc5' style="stroke: url(#Pattern);" fill='transparent' stroke-width='60' d='M 364 58 A 250 250 0 1 1 235 58'/>
</svg>
In my answer to this similar question, I used six linear gradients to approximate a conical gradient. If you are only needing the gradient for the stroke/perimeter of a circle, rather than the fill, then it should be a good enough approximation.
svg multiple color on circle stroke
Here is a possible vector conical gradient, but only VML (+IE) can do it...:
http://midiwebconcept.free.fr/Demos/degradeconique.htm
If you dig into this page, you'll find code that approximates a conic gradient in SVG by drawing it as a series of 1 degree arcs.
Add a patern with 100% width and height so its just a one repetition pattern
<div style="width:100px">
<svg viewBox="0 0 35 35" style="transform: scale(1) rotate(-90deg)">
<defs>
<pattern
id="p1"
patternUnits="userSpaceOnUse"
width="100%"
height="100%"
patternTransform="rotate(90)"
>
<image href="https://blogs.igalia.com/dpino/files/2020/06/conic-gradient.png" width="36" height="36" />
</pattern>
</defs>
<g>
<circle
cx="50%"
cy="50%"
stroke-width="2"
r="15.915"
stroke-dasharray="89, 100"
stroke="url(#p1)"
fill="none"
/>
</g>
</svg>
</div>
http://en.wikipedia.org/wiki/File:Blended_colour_wheel.svg uses an innovative technique to approximate it.