I'm using an SVG sprite in my react component. All SVGs without gradient work fine. But the one with the linear gradient does not apply the defined gradient. I've tried all possible modifications, but it still does not apply gradient at all.
SVG file:
<svg
style="position: absolute; width: 0; height: 0; overflow: hidden;"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<defs>
<symbol id="icon-item1" viewBox="0 0 452 520">
<title>item1 Logo Badge</title>
<path d="M 41,460 L 0,0 451,0 410,460 225,512" fill="RGB(227,79,38)" />
<path d="M 226,472 L 375,431 410,37 226,37" fill="RGB(239,101,42)" />
<path
d="M 226,208 L 151,208 146,150 226,150 226,94 84,94 99,265 226,265 z M 226,355 L162,338 158,293 102,293 109,382 226,414 z"
fill="RGB(236,237,238)"
/>
<path
d="M 226,265 L 295,265 288,338 226,355 226,414 341,382 357,208 226,208 z M 226,94 L226,150 362,150 367,94 z"
fill="RGB(255,255,255)"
/>
</symbol>
<symbol id="icon-item2" viewBox="2.59 0 214.09101008 224">
<title>item2 Logo Badge</title>
<linearGradient
id="icon-item2-a"
gradientTransform="matrix(1 0 0 -1 0 264)"
gradientUnits="userSpaceOnUse"
x1="102.4"
x2="56.15"
y1="218.63"
y2="172.39"
>
<stop offset="18%" stopColor="#0052cc" />
<stop offset="100%" stopColor="#2684ff" />
</linearGradient>
<linearGradient
id="icon-item2-b"
x1="114.65"
x2="160.81"
xlinkHref="#icon-item2-a"
y1="85.77"
y2="131.92"
/>
<path
d="m214.06 105.73-96.39-96.39-9.34-9.34-72.56 72.56-33.18 33.17a8.89 8.89 0 0 0 0 12.54l66.29 66.29 39.45 39.44 72.55-72.56 1.13-1.12 32.05-32a8.87 8.87 0 0 0 0-12.59zm-105.73 39.39-33.12-33.12 33.12-33.12 33.11 33.12z"
fill="#2684ff"
/>
<path
d="m108.33 78.88a55.75 55.75 0 0 1 -.24-78.61l-72.47 72.44 39.44 39.44z"
fill="url(#icon-item2-a)"
/>
<path
d="m141.53 111.91-33.2 33.21a55.77 55.77 0 0 1 0 78.86l72.67-72.63z"
fill="url(#icon-item2-b)"
/>
</symbol>
</defs>
</svg>
React JS:
<svg className="content__logo">
<use href={`${sprite}#icon-item2`} />
</svg>
Related
I have a simple SVG graphic with a path for a mask. As soon as I assign the #myMask to the object,the mask doesn't work at all. This should be something obvious, but I'm not seeing it.
CodePen: https://codepen.io/ambidustrious/pen/powddJd
Thoughts?
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 527.8 498.1" style="enable-background:new 0 0 527.8 498.1;" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="userSpaceOnUse">
<path id="mask" class="st2" d="M 113.297 497.17 L 113.297 300.87 C 113.397 239.27 163.297 205.07 224.997 205.07 L 300.697 205.07 C 330.997 206.07 418.497 106.27 432.997 91.67 L 527.297 0.57" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="58">
</path>
</mask>
</defs>
<g id="arrow" transform="matrix(1, 0, 0, 1, 1190.697021, 194.369995)" mask="url(#myMask)" >
<linearGradient id="Union_6_00000050629510371142239550000012438780590208862086_" gradientUnits="userSpaceOnUse" x1="-1883.5894" y1="595.0461" x2="-1883.5894" y2="594.0461" gradientTransform="matrix(432.3066 0 0 -496.631 813408.6875 295324.4688)">
<stop offset="0" style="stop-color:#E89657"/>
<stop offset="1" style="stop-color:#D8251F"/>
</linearGradient>
<path id="Union_6" style="fill:url(#Union_6_00000050629510371142239550000012438780590208862086_);" d="m-1095.7 302.8v-196.3c.1-61.6 50-111.6 111.7-111.7h75.7c20.6.1 40.3-8.1 54.8-22.7l148.7-148.7-17.2-17.2 58.6 0 0 58.6-17.2-17.2-148.7 148.6c-10.4 10.4-22.7 18.6-36.2 24.2c-13.5 5.6-28.1 8.5-42.7 8.5h-75.8c-42.8 0-77.5 34.7-77.6 77.6v196.3h-34.1z" />
</g>
</svg>
I think that there was something about the position of the elements. And then your mask more or less covers the entire arrow. I cleaned up a bit and positioned your elements in the viewBox of "0 0 500 500", so that there is no need for using transform/translate.
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="myMask" x="0" y="0" maskUnits="userSpaceOnUse">
<path id="mask" class="st2" d="m 20.307087,495.15767 v -196.3 c 0.1,-61.6 50,-95.8 111.700063,-95.8 h 75.7 c 30.3,1 117.8,-98.79997 132.3,-113.399929 l 94.3,-91.1000322" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="58" />
</mask>
<linearGradient id="LG01" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#E89657"/>
<stop offset="1" style="stop-color:#D8251F"/>
</linearGradient>
</defs>
<g id="arrow" mask="url(#myMask)">
<path id="Union_6" style="fill:url(#LG01);" d="M 0,496.6 V 300.3 C 0.1,238.7 50,188.7 111.7,188.6 h 75.7 c 20.6,0.1 40.3,-8.1 54.8,-22.7 L 390.9,17.2 373.7,0 h 58.6 V 58.6 L 415.1,41.4 266.4,190 c -10.4,10.4 -22.7,18.6 -36.2,24.2 -13.5,5.6 -28.1,8.5 -42.7,8.5 h -75.8 c -42.8,0 -77.5,34.7 -77.6,77.6 v 196.3 z" />
</g>
</svg>
I'm trying to draw an arc with SVG but I'm stucked.
The goal is to get a figure like this:
what I get instead is this:
Those are the SVG tags I'm playing with:
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
Can anybody help me to understan what's wrong on my node?
<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
<!--
<path d="M 100 50
a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
-->
<path d="M 50 50
a 50,50 270 1 0 25,15" stroke="black" fill="red" stroke-width="2" />
<path d="M 150 150
a 50,50 270 0 0 125,115" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>
your problem is the large-arc-flag, set it to 1
MDN Reference
I try to draw a shape with a path that must be reduced like in this solution Find Parallel or Offset SVG path
I use the filter "erode" but with pattern it doesn't work : the pattern is deformed.
Is there a way to do this without the bezier.js solution, with pure SVG/CSS ?
Here is a sample of my problem
I want to have the shape of the right with the pattern of the left.
<!DOCTYPE html>
<html>
<body>
<svg>
<defs>
<pattern id="circ" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<rect fill="blue" width="100%" height="100%" />
<circle cx="10" cy="10" r="10" fill="green" />
</pattern>
<filter id="erode">
<feMorphology in="SourceGraphic" operator="erode" radius="10"/>
</filter>
<path id="thing" d="M 0,0 H 50 A 35,35 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z" />
</defs>
<use href="#thing" fill="url(#circ)" width="400" height="400" filter="#erode"/>
<use x="100" href="#thing" filter="url(#erode)" fill="url(#circ)" width="400" height="400" />
</svg>
</body>
</html>
Yes. You can use a mask.
svg {
width: 300px;
}
.purple {
fill: rebeccapurple;
}
.reduce-me {
mask: url(#reducer);
}
#reduce-amount {
stroke-width: 5px;
}
<svg viewBox="0 0 100 100">
<path class="purple"
d="M 50,10 Q 100,10, 50,50 Q 0,90, 50,90
Q 100,90, 50,50 Q 0,10, 50,10 Z"/>
</svg>
<svg viewBox="0 0 100 100">
<defs>
<!-- the shared path that is used by both the purple path and the mask -->
<path id="shared-path"
id="p" d="M 50,10 Q 100,10, 50,50 Q 0,90, 50,90
Q 100,90, 50,50 Q 0,10, 50,10 Z" />
<!-- a mask that shrinks the shape by half the stroke-width -->
<mask id="reducer">
<use id="reduce-amount" xlink:href="#shared-path"
fill="white" stroke="black"/>
</mask>
</defs>
<!-- the shape that gets reduced -->
<use class="purple reduce-me" xlink:href="#shared-path"/>
</svg>
How this works
If we just render what the mask looks like (on the right) we can see how this works.
svg {
width: 300px;
}
.purple {
fill: rebeccapurple;
}
.reduce-me {
mask: url(#reducer);
}
#reduce-amount {
stroke-width: 10px;
}
<svg viewBox="0 0 100 100">
<path class="purple"
d="M 50,10 Q 100,10, 50,50 Q 0,90, 50,90
Q 100,90, 50,50 Q 0,10, 50,10 Z"/>
</svg>
<svg viewBox="0 0 100 100">
<defs>
<!-- the shared path that is used by both the purple path and the mask -->
<path id="shared-path"
id="p" d="M 50,10 Q 100,10, 50,50 Q 0,90, 50,90
Q 100,90, 50,50 Q 0,10, 50,10 Z" />
</defs>
<use id="reduce-amount" xlink:href="#shared-path"
fill="white" stroke="black"/>
</svg>
We are using the same shape as a mask. However the mask has a thick black stroke around it. Black in a mask makes things transparent. The rest of the mask is white, which stays visible.
You can alter the amount of the shape reduction by changing the stroke-width value in the .reduce-amount class.
The disadvantages of this method are:
1. you need a mask for every different path shape
2. you can't set the stroke style of the reduced size shape. However you could simulate a stroke colour by overlaying two paths with different reduction amounts.
You can extend the filter to make this work. There seems to be a bug eroding pattern filled shapes - it's not taking the minimum of the alpha channels in the radius correctly. But if you start with SourceAlpha rather than SourceGraphic and then create your mask using component transfers it seems to work.
<svg>
<defs>
<pattern id="circ" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<rect fill="blue" width="100%" height="100%" />
<circle cx="10" cy="10" r="10" fill="green" />
</pattern>
<filter id="erode3">
<feMorphology in="SourceAlpha" result="eroded"
operator="erode" radius="10"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="1 0"/>
<feFuncG type="discrete" tableValues="1 0"/>
<feFuncB type="discrete" tableValues="1 0"/>
</feComponentTransfer>
<feComposite operator ="in" in="SourceGraphic"/>
</filter>
<path id="thing" d="M 0,0 H 50 A 35,35 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z" />
</defs>
<use href="#thing" fill="url(#circ)" width="400" height="400" filter="url(#erode3)"/>
<use x="100" href="#thing" filter="url(#erode)" fill="url(#circ)" width="400" height="400" />
</svg>
I have two thick lines and I want to apply pattern for this lines. Lines should have the same pattern, but start of drawing pattern should start from (0, 0) for each line separately. In my experiment http://jsfiddle.net/69t09wey/ patterns apply like mask. I.e pattern apply for whole svg canvas as invisible layer and where line is visible, pattern also visible.
<svg viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
<path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
</pattern>
<g transform="scale(5)">
<rect x="1" y="1" width="1000" height="1000"
fill="none" stroke="blue" />
<path d="M 1 9 L 200 9"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
<path d="M 1 53 L 200 53"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
</g>
</svg>
If you make your lines the same. Then move the second one by applying a transform. That will shift the coordinate space of the pattern.
<svg viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
<path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
</pattern>
<g transform="scale(5)">
<rect x="1" y="1" width="1000" height="1000"
fill="none" stroke="none" />
<path d="M 1 9 L 200 9"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
<path d="M 1 9 L 200 9" transform="translate(0,44)"
fill="red" stroke="url(#pattern-1)" stroke-width="20" />
</g>
</svg>
I have written the following code to display a triangle at the end of polyline and an image at the start of that.
Running this svg it just shows the triangle at the end but the image is not being displayed.
What am i missing here...
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="Image"
viewBox="0 0 10 10"
refX="5" refY="5"
markerWidth="6"
markerHeight="6"
orient="auto">
<path d="M 0 0 L 10 10 L 10 0 L 0 0 z" />
</marker>
</defs>
<polyline points="10,90 50,80 90,20"
fill="none" stroke="black"
stroke-width="2"
marker-end="url(#Triangle)" marker-start="url(#Image)"/>
</svg>
There is no marker with the id Triangle, so it isn't showing that. It is therefore only showing the Image marker (which happens to be a triangle).