I have an svg <g> in which I have a line (can be rect too.. have tried both). This inner element has a fill/stroke that can rotate from 8 different colors or patterns. The shape is 5px height, with a dynamic width, and I should support fading left, right or both edges.
I would like to achieve this without creating extra elements on the svg and some how apply a mask/gradient but it seems I cannot get it to work.
Since the shape's X and Y, color, and width can change, I have not found a consistent way to make this happen without creating new elements with a bunch of color combinations. Does anyone have an idea on how to achieve this in the most simple and scalable way?
UPDATE
After Paul suggestion i created a fiddle to represent some how the scenario i have:
https://jsfiddle.net/0tnc9mq5/
So multiplelines/rects in same svg with different colors, positions and dimensions. What would be the way to apply some of those fades to some of those elements? How would i implement Paul's suggestion? Is there any other approach?
Thanks
Here is one way to do it, using masks to produce the fading ends. The fades are fixed in this example to be 10% of the length of the line.
We create a shared SVG that contains <symbol> elements for each of the three variants you need. That only needs to appear once in your HTML.
Then anywhere you want one of the separators, include the mini SVG corresponding to the separator you desire. You can set the width, height and colour of the separator using CSS.
svg.sep {
width: 500px;
height: 5px;
}
.one {
color: red;
}
.two {
color: green;
}
.three {
color: blue;
}
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="gleft">
<stop offset="0%" stop-color="black"/>
<stop offset="10%" stop-color="white"/>
</linearGradient>
<linearGradient id="gright">
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
<linearGradient id="gboth">
<stop offset="0%" stop-color="black"/>
<stop offset="10%" stop-color="white"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</linearGradient>
<mask id="mleft">
<rect width="1" height="1" fill="url(#gleft)"/>
</mask>
<mask id="mboth">
<rect width="1" height="1" fill="url(#gboth)"/>
</mask>
<mask id="mright">
<rect width="1" height="1" fill="url(#gright)"/>
</mask>
<symbol id="left" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect width="1" height="1" fill="currentColor" mask="url(#mleft)"/>
</symbol>
<symbol id="both" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect width="1" height="1" fill="currentColor" mask="url(#mboth)"/>
</symbol>
<symbol id="right" viewBox="0 0 1 1" preserveAspectRatio="none">
<rect width="1" height="1" fill="currentColor" mask="url(#mright)"/>
</symbol>
</defs>
</svg>
<p> Lorem ipsum dolor sit</p>
<svg viewBox="0 0 1 1" preserveAspectRatio="none" class="sep one">
<use xlink:href="#left"/>
</svg>
<p> Lorem ipsum dolor sit</p>
<svg viewBox="0 0 1 1" preserveAspectRatio="none" class="sep two">
<use xlink:href="#right"/>
</svg>
<p> Lorem ipsum dolor sit</p>
<svg viewBox="0 0 1 1" preserveAspectRatio="none" class="sep three">
<use xlink:href="#both"/>
</svg>
Related
Trying to position a battery indicator within a parent SVG.The SVG <svg viewBox="0 0 24 24"> element has a path for the battery and a text element showing the percentage.Its being positioned with a couple of css transforms and text attributes.The text is correctly positioned when opening in chrome/firefox but goes offshoot in safari.
<text
text-anchor="middle"
dominant-baseline="middle"
style="transform:translate(50%,98%) scale(.2);
font:700 13px sans-serif;fill:#deba78"
>24.2%</text>
Codepen https://codepen.io/niwsa/pen/rNNBKEg?editors=1000
Wrap the <text> element into a <g> element and apply the CSS transform on that, it happens to work currently even in Safari. This way, it's still CSS, so CSS transitions, animations, custom properties, selector based styling, continuous font scaling etc. work.
Instead of translating the text you may give the text some attributes like x and y. Instead of scaling the text you may change the font-size.
For the path you may choose svg transforms like this:
body {
width: 200px;
}
.bg {
fill: #beeb1b;
}
.cap {
fill: #aaa8a9;
}
.trunk {
fill: #231f20;
}
<svg xmlns="http://www.w3.org/2000/svg" tabindex="0" viewBox="0 0 351.33 722" aria-labelledby="bottletitle bottledesc" role="img">
<title id="bottletitle">
Bottle
</title>
<desc id="bottledesc">
Bottle with battery indicator inside
</desc>
<g data-name="Layer 4" class="bg">
<rect width="351.33" height="722" rx="23.33" ry="23.33"/>
</g>
<g data-name="Layer 3" class="cap">
<rect x="146.81" y="60.9" width="57.71" height="73.67"/>
</g>
<g data-name="Layer 2" class="trunk">
<path d="M173,153.25h57.75V223s1.08,25.33,30.41,56c27.06,28.29,35.34,60.33,35,71.33-.21,7,0,324.67,0,324.67s-3.33,7.33-9.33,7.33H117.12s-9-.33-9-6.66v-325s-.33-33,30.34-67c0,0,34.33-32.67,34.33-60.67S173.33,153.63,173,153.25Z" transform="translate(-26.46 -18.67)"/>
</g>
<svg viewBox="0 0 24 24">
<defs>
<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="#2ecc71"/>
<stop offset="24.2%" stop-opacity="1" stop-color="#2ecc71"/>
<stop offset="24.2%" stop-opacity="0" stop-color="#2ecc71"/>
<stop offset="100%" stop-opacity="0" stop-color="#2ecc71"/>
<animate attributeName="y2" from="1" to="0" dur="500ms" repeatCount="2s" fill="freeze"/>
</linearGradient>
</defs>
<path fill="url(#lg)" d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" stroke="#fff" transform="scale(.5,.5) rotate(90,12 12) translate(45,-12)"/>
<text text-anchor="middle" dominant-baseline="middle" style="font:700 2.5px sans-serif;fill:#deba78" x="12" y="23">
24.2%
</text>
</svg>
</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 create a SVG background image like this (two colors, radial gradient, S-shape cutout with smooth edges):
It's quite easy to create a radial gradient (e.g. using this tool):
<!-- SVG syntax -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g920" gradientUnits="userSpaceOnUse" cx="5.408560311284047%" cy="0%" r="93.04166277718278%">
<stop stop-color="#ed1c24" offset="0.1"/><stop stop-color="#003663" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g920)" />
</svg>
but is it possible to add the cutout too?
Lennis' answer was close. But you would get better results by combining the fill and the filter in one element, rather than try to use a blurry white shape to hide part of the gradient.
Note that the blur will affect any edge of the shape, including the top, left and right. So you need to make sure those edges are well away from (outside of) the edge of the SVG viewport.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
<stop stop-color="#ed1c24" offset="0.1"/>
<stop stop-color="#003663" offset="0.8"/>
</radialGradient>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
</filter>
</defs>
<path id="svg_1" d="M -0.5,-0.5
L 1.5,-0.5
L 1.5,0.5
L 1,0.5
C 1,0 0.6,0.1 0.5,0.25
C 0.4,0.4 0.1,0.4 0,0.25
L -0.5,0.25
Z"
fill="url(#g)" filter="url(#f1)"/>
</svg>
You could use a blur on a white element to make it look like a cutout.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
<stop stop-color="#ed1c24" offset="0.1"/>
<stop stop-color="#003663" offset="1"/>
</radialGradient>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
<path id="svg_1" fill="white" d="m-0.1,0.5 l0,0.55l1.15,0l0,-0.53495c0,0 -0.1,-0.1 -0.5,0c-0.3,0.1 -0.5,0 -0.5,0l-0.1,0z" filter="url(#f1)"/>
</svg>
You could also try a meshgradient, it's in the svg 2.0 spec. At the moment no browser supports it that I know off.
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.
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.