I am trying to get a linear gradient to work with gradientUnits='userSpaceOnUse' but for some reason the gradient is not applied.Take a look at the following code.
<svg width="500" height="500" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="user-grad" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="orange" offset="0"></stop>
<stop stop-color="blue" offset="1"></stop>
</linearGradient>
<linearGradient id="object-grad" x1="0" y1="0" x2="1" y2="0">
<stop stop-color="orange" offset="0"></stop>
<stop stop-color="blue" offset="1"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="200" height="100" fill="url(#user-grad)"/>
<rect x="250" y="0" width="200" height="100" fill="url(#object-grad)"/>
</svg>
The first rect has the gradientUnits attribute applied and the second one does not. The gradient works well the second one but not the first one. How do I get the first one to look like the second one
Related
This question already has answers here:
SVG gradient for perfectly horizontal path
(2 answers)
Closed 3 years ago.
I'm trying to add a gradient to the stroke of a line which fades out at the top but having no luck. Actually I kind of got it working like this, but it has browser issues even in Chrome certain SVG sizes where the gradient just breaks and is solid:
<linearGradient
id='whiteFadeGrad'
x1={svgHeight}
y1='0'
x2='0'
y2={svgHeight}
gradient-units='userSpaceOnUse'
>
<stop offset='0' stop-color='rgba(255,255,255,0)' />
<stop offset='1' stop-color='rgba(255,255,255,0.2)' />
</linearGradient>
I would much rather stick to using percentage units, but can't get it to work:
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
Thanks
It looks like a bug and a hack, but worked:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120.001" y2="200" style="stroke: url('#fadeGrad'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
You might probably use <rect> instead of <line>, which is not so hacky:
<svg height="200" width="500">
<defs>
<linearGradient id='fadeGrad' x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset='0%' stop-color='red' />
<stop offset='100%' stop-color='blue' />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:4px; shape-rendering: crispEdges;" />
<rect x="120" y="0" width="4" height="200" style="fill: url('#fadeGrad'); shape-rendering: crispEdges;" />
</svg>
Check this, I dont know much about SVG, but a simple googling does the job for me.
Could you please go through the code.
<p>The solid green one works, but you can't see the other when I apply the gradient to it. I've tried a lot of different x1/x2/y1/y2 values as well as gradientTransform(rotate(d)).</p>
<svg height="200" width="500">
<defs>
<linearGradient id="e" x1="40" y1="210" x2="400" y2="210" gradientUnits="userSpaceOnUse" gradientTransform="rotate(90)">
<stop stop-color="steelblue" offset="0" />
<stop stop-color="red" offset="1" />
</linearGradient>
</defs>
<line x1="100" y1="0" x2="100" y2="200" style="stroke: green; stroke-width:10px; shape-rendering: crispEdges;" />
<line x1="120" y1="0" x2="120" y2="200" style="stroke: url('#e'); stroke-width:4px; shape-rendering: crispEdges;" />
</svg>
What is the correct way to fill an SVG rectangle with jet colour scheme? Using multiple stops in linearGradient does not seem to work.
Edit, I am trying to fill the a rectangle with one of the following colour gradient.
I edited the MDN code with a rainbow example
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients -->
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#d30000"/>
<stop offset="30%" stop-color="#ffff05"/>
<stop offset="50%" stop-color="#05ff05"/>
<stop offset="70%" stop-color="#05ffff"/>
<stop offset="100%" stop-color="#041ae0"/>
</linearGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
in a fiddle: https://jsfiddle.net/9bmvr5hd/
The BbwrR gradient is the example used in Mozilla's SVG - Gradients documentation:
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1">
<stop class="stop1" offset="25%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="75%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="25%" stop-color="blue"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="75%" stop-color="red"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient1); }
.stop1 { stop-color: blue; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: red; }
]]></style>
</defs>
<rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
</svg>
I swapped the location of the red and blue and adjusted the offset percentages to try to make it look more like your image. You should be able to just change the colors and add/remove stops for the others.
I have some SVG elements on which there are some pattern already applied. The pattern is applied as fill color. That means the pattern fills up whole SVG element. Basically i want to partially fill up my element using the pattern.
From different sources, i found that i can apply linear gradient to partially fill an element.
So my question is can i use gradient on a pattern or there is any way to partially fill an element by pattern?
NOTE A same element can be drawn(with gradient) on top of the original element(with pattern) to achieve this. But drawing a same object on top of it is not going to help me.
What I have tried
<defs>
<pattern id="patternToApply" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="Firebrick"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="url(#patternToApply)"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
From Robert Longson's Comment i tried following:
First
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Second
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="red"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Third
<defs>
<pattern id="pathCrownGradient" width="9px" height="9px" x="0" y="0" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" fill="url(#gradientToApply)">
<rect id="rectPatternToApply" width="25" height="25" x="0" y="0" stroke-width="0" fill="url(#gradientToApply)"></rect>
<image id="imgPatternToApply" width="10px" height="10px" x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/aspx/charting/images/nonie/hash.gif"></image>
</pattern>
<linearGradient id="gradientToApply" x1="0" x2="0" y1="100%" y2="50%">
<stop offset="30%" stop-color="red"/>
<stop offset="70%" stop-color="white"/>
</linearGradient>
Unfortunately still not working.
You have to take into account the order in which you define what your final display will be.
So first create a pattern.
Then use that pattern to create another pattern.
If that is to your liking, you can then use path and use the second pattern as a fill.
I'm trying to apply a CSS Mask to fade a DIV horizontally in both direction.
I created the mask with an online editor and it works smoothly using -webkit-mask and base64 encoding:
#slicenter{-webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAUCAYAAAAeGxcbAAACWUlEQVR4Xu3bQU4DMQwFUHoH4P7ng94BGkSlyKQjRv6bqG8kVKVgd/rqjflwefl7vZWnxvly+/r6fXwt59XP31u8T3WjfnWeX672Olu/eDueIkCAAAECBAgQIECAAIEnEvgse+i1nMf352t1vu+/4/GovtZ+lH15dX742mPxrtfZpfhoqT6zzI/76Pwy4InmzVslQIAAAQIECBAgQIAAgQcC0aX59hpHS3dy2f9JxuslQTfnBAgQIECAAAECBAgQILCrgAR9+uTmBF6CvutIu28CBAgQIECAAAECBAjsKSBBnz63OYFP/rn8f/6Hfc/xcdcECBAgQIAAAQIECBAgkBKQoEvQU7OkDwECBAgQIECAAAECBAg0BCToEvTG+CglQIAAAQIECBAgQIAAgZSABF2CnpolfQgQIECAAAECBAgQIECgISBBl6A3xkcpAQIECBAgQIAAAQIECKQEJOgS9NQs6UOAAAECBAgQIECAAAECDQEJugS9MT5KCRAgQIAAAQIECBAgQCAlIEGXoKdmSR8CBAgQIECAAAECBAgQaAhI0CXojfFRSoAAAQIECBAgQIAAAQIpAQm6BD01S/oQIECAAAECBAgQIECAQENAgi5Bb4yPUgIECBAgQIAAAQIECBBICUjQJeipWdKHAAECBAgQIECAAAECBBoCEnQJemN8lBIgQIAAAQIECBAgQIBASkCCLkFPzZI+BAgQIECAAAECBAgQINAQkKBL0Bvjo5QAAQIECBAgQIAAAQIEUgISdAl6apb0IUCAAAECBAgQIECAAIGGwLYJ+jfSylgzQ2my8wAAAABJRU5ErkJggg==);}
The problem is: this works just on Chrome (and maybe Safari).
So I tried to export the same image to HTML/SVG. This is what I got:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" >
<defs>
<linearGradient id="lgrad" x1="0%" y1="50%" x2="100%" y2="50%" >
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
<stop offset="5%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="95%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)"/>
</svg>
And then I tried to convert this vector in a mask (but it's probably wrong):
<svg height="0" >
<defs>
<linearGradient id="g" gradientUnits="objectBoundingBox" x1="0%" y1="50%" x2="100%" y2="50%" >
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
<stop offset="5%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="95%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:0" />
</linearGradient>
<mask id="lgrad" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</mask>
</defs>
</svg>
I applied the mask to the same element with:
#slicenter{mask: url(#lgrad);}
But it doesn't works. Any Ideas?
Cheers
I just started with SVG. simple things like
<svg>
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="#222" mask="url(#Mask)" />
</svg>
In this jsfiddle I have this svg with on other one. However, it only shows the one first defined. Can someone explain why and how to fix this ? Thnx!