CSS 3 gradients for styling SVG elements
No it's not yet possible to use CSS3 gradients for the fill property. The good news though is that it's being discussed by the CSS and SVG workgroups, and SVG.next will depend on CSS3 Image Values (which defines the CSS gradient syntax). See http://www.w3.org/2011/07/29-svg-minutes.html#item08.
Note that the base url for the fill:url(...)
by default is the file that contains this rule. So if you want to move fill:url(#linearGradientXYZ)
to an external stylesheet remember to add the full path to the file containing that gradient definition, eg. fill:url(../images/gradients.svg#linearGradientXYZ)
.
SVG modifying gradient to an element that is reused with use
Two observations:
You need to define 2 gradients and choose which one with a variable:
fill: var(--grd);
You don't fill the
<polygon>
you need to reuse. You fill the<use>
element.
I hope it helps.
svg {width: 250px; height:200px;border:1px solid}:root { --grd: url(#gradient);}.second{--grd: url(#gradient2);}
use { fill: var(--grd);}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient"> <stop offset="0%" stop-color="orange"/> <stop offset="100%" stop-color="red" /> </linearGradient> <linearGradient id="gradient2"> <stop offset="0%" stop-color="lime"/> <stop offset="100%" stop-color="green" /> </linearGradient> <polygon id="triangle" points="0,0 100,0 0,66" /> </defs> <use class="use-triangle" xlink:href="#triangle" /></svg><svg class="second" viewBox="0 0 100 100"> <use class="use-triangle" xlink:href="#triangle" /></svg>
Reproducing SVG gradient equivalent to CSS gradient with linear-gradient
When you have 2 colors the percentages are 0%
and 100%
.box {
height:200px;
background:
linear-gradient(to right,red,blue) top/100% 40%,
linear-gradient(to right,red 0%,blue 100%) bottom/100% 40%;
background-repeat:no-repeat;
border:5px solid;
}
<div class="box">
</div>
How to define SVG gradient in page-global CSS file
Is there any way to define the linear gradient in the page-global CSS?
No. You can style some of the linearGradient
properties with CSS, but you can't define the gradient itself.
If not, and if I were to define the linear gradient using a element within each SVG, is it OK for them to have the same ID?
If you mean more than one linearGradient with the same id, then No. id attributes must be unique.
If not, how can I declare a single with an ID outside of any SVG? Is it possible to have a “dummy” SVG that defines only the gradient and the CSS can refer to that gradient by its ID?
You can define a linearGradient in one inline SVG and access it from another. You can use CSS to assign the gradient.
svg rect { fill: url(#mygradient);}
#mygradient stop.start-color { stop-color: red;}
#mygradient stop.end-color { stop-color: blue;}
<svg width="0" height="0"> <defs> <linearGradient id="mygradient"> <stop offset="0" class="start-color"/> <stop offset="1" class="end-color"/> </linearGradient> </defs></svg>
<svg> <rect width="300" height="150"/></svg>
CSS3 gradients as SVG
You need to specify the cx
and cy
attributes of you radial gradient...
<svg xmlns="http://www.w3.org/2000/svg">
<radialGradient id="g" r="1" cx="50%" cy="10%">
<stop stop-opacity=".3" stop-color="white" offset=".1"/>
<stop stop-opacity="0" stop-color="white" offset=".9"/>
</radialGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)"/>
</svg>
How to apply linear gradient to SVG symbol in use tag?
Seems like a Chrome bug, probably the infamous Issue 109212: SVG (filter
| fill
[…]) from external files not applied from 2012; found in related question: Gradient in defs
not showing up in SVG sprite in Chrome.
<svg style="width: 5rem; height: 5rem;">
<use href='data:image/svg+xml,<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gr">
<stop offset=".2" stop-color="red" />
<stop offset=".8" stop-color="blue" />
</linearGradient>
<symbol id="icon" viewBox="0 0 8 8" >
<path d="M0 0 L 8,0 8,8 0,8 Z M 2,2 L 6,2 6,6 2,6 Z"
fill="url(%23gr)"
stroke="gold" />
</symbol>
</defs>
</svg>#icon' />
</svg>
Filling SVG with gradient
You can use this, explanation here: https://www.w3schools.com/graphics/svg_grad_linear.asp
.widgetColor {
position: absolute;
margin-top: 5px;
margin-left: 5px;
max-width: 24px;
overflow: auto;
filter: drop-shadow(0px 0px 4px #fff);
stroke: blueviolet;
}
<svg class="widgetColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36.9 40.24">
<path d="M36.81,15.63a16.59,16.59,0,0,0-.74-3.4,17.45,17.45,0,0,0-1.39-3.12A18.64,18.64,0,0,0,18.45,0,18.62,18.62,0,0,0,2.23,9.11a16.81,16.81,0,0,0-1.4,3.12,15.94,15.94,0,0,0-.73,3.4A14.76,14.76,0,0,0,0,17.4a15.5,15.5,0,0,0,.1,1.69c0,.25.06.49.1.73s.09.57.15.86.13.62.21.93.1.35.16.52c.11.36.22.72.35,1.08.18,1.39.38,2.68.38,3.41A4,4,0,0,0,5.5,30.67L7,31.4H7a5.37,5.37,0,0,1,.53,1,3.52,3.52,0,0,1,.15.42c0,.13.07.25.1.38a4.93,4.93,0,0,1,.11.94v1a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5v-1a4.93,4.93,0,0,1,.11-.94c0-.13.06-.25.1-.38s.1-.28.15-.42a5.41,5.41,0,0,1,.54-1h0l1.51-.73a4.05,4.05,0,0,0,4.06-4.05c0-.73.19-2,.37-3.41.14-.36.25-.72.36-1.08l.15-.52c.08-.31.15-.62.22-.93s.1-.57.14-.86.08-.48.11-.73c0-.55.09-1.11.09-1.69A17.19,17.19,0,0,0,36.81,15.63ZM11.22,28.3a5,5,0,0,1-5-5c0-2.79.17-4,3-4s7.13,1.24,7.13,4A5,5,0,0,1,11.22,28.3Zm7.23,1.24c-1,0-1.76,1.85-1.76.88a3.29,3.29,0,0,1,1-2.22c.23-.19.48.53.75.53s.52-.72.75-.53a3.3,3.3,0,0,1,1,2.22C20.22,31.39,19.43,29.54,18.45,29.54ZM26.9,28.3a5,5,0,0,1-5-5c0-2.79,4.35-4,7.13-4s3,1.24,3,4A5,5,0,0,1,26.9,28.3Z"/>
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#000" />
<stop offset="95%" stop-color="#FFF" />
</linearGradient>
</defs>
<style type="text/css">
svg{fill:url(#MyGradient)}
</style>
</svg>
Fill an SVG shape with a gradient
As commented by Paul LeBeau, you need to convert the wavy shape to one path, then you can fill the wavy shape with a linear gradient as shown in this example:
<svg viewbox="7.5 0 60 10"> <defs> <linearGradient id="gradient"> <stop offset="5%" stop-color="#FFC338" /> <stop offset="95%" stop-color="#FFEA68" /> </linearGradient> </defs> <path fill="url(#gradient)" d="M0 10 V5 Q2.5 2.5 5 5 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 t5 0 V10" /></svg>
Related Topics
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
Why Doesn't Max-Width Override Min-Width
How to Vertically Center Elements in Bulma
How to Change the CSS of Color of Select2 Tags
CSS - Vertically Center an Image Within a Floated Div
Create Angular Material Theme with CSS Variables
Z-Index Behaviour on Pseudo Elements
Css: How to Attach an Arrow to a Div and Make It Overlap the Border
:Hover Is Not Working Properly in IE9
Search Button Inside the Search Box Like Bing
Locally Installed Ttf Overrides Google Fonts
Convert Arabic Ttf/Otf Fonts to Woff, Eof
Moodle Not Showing CSS and Theme with Linux Server
Why Doesn't This Radial-Gradient Complete the Circle
Polymer Core Transitions for Animated Pages with Core List Content