CSS 3 Gradients for Styling Svg Elements

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:

  1. You need to define 2 gradients and choose which one with a variable: fill: var(--grd);

  2. 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



Leave a reply



Submit