Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Linear gradients in SVG without defs

I can use linear gradient in SVG with defs-section like:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

Can I use linear gradient without defs-section? I find something like this:

<rect style="fill:lineargradient(foo)">
like image 600
AndreyAkinshin Avatar asked Sep 30 '11 17:09

AndreyAkinshin


1 Answers

<defs> is only needed for structuring purposes, the elements in it are not displayed, but since a gradient can only be visible when applied to a shape or another element, you can define it in any place of the document.

But you still have to stick to the correct syntax:

<rect style="fill:url(#myLinearGradient1)" ... />
like image 172
Spadar Shut Avatar answered Jan 04 '23 04:01

Spadar Shut