Note that there are some explanatory texts on larger screens.

plurals
  1. POOne SVG file, many SVG gradients inside
    primarykey
    data
    text
    <p>I’m making a set of buttons which use dynamic gradients. I’ve taken care of Firefox 3.6+ and WebKit by using their proprietary CSS extensions and all I need to do is support Opera, iOS and IE9 by using background-image: url("gradient.svg").</p> <p>This is relatively easy, I made an SVG file, linked it and got it working. However, I’m making a set so I need at least 6 gradients. When I normally do it in images, I create a sprite for fast HTTP access. I’m not sure how to achieve this in SVG – can I use one file and access different parts of its XML by using #identifiers, like XBL does?</p> <p>My current SVG:</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt; &lt;defs&gt; &lt;linearGradient id="select-gradient" x1="0" x2="0" y1="0" y2="1"&gt; &lt;stop offset="0%" stop-color="rgb(231,244,248)"/&gt; &lt;stop offset="100%" stop-color="rgb(207,233,241)"/&gt; &lt;/linearGradient&gt; &lt;style type="text/css"&gt; rect { fill: url(#select-gradient); } &lt;/style&gt; &lt;/defs&gt; &lt;rect x="0" y="0" rx="6" ry="6" height="100%" width="100%"/&gt; &lt;/svg&gt; </code></pre> <p>And then I have CSS:</p> <pre><code>.button-1 { background-image: url("gradient-1.svg"); } .button-2 { background-image: url("gradient-2.svg"); } </code></pre> <p>I want to do something like this:</p> <pre><code>.button-1 { background-image: url("gradient.svg#gradient1"); } .button-2 { background-image: url("gradient.svg#gradient2"); } </code></pre> <p>Is it even possible? Can you help me out? I really don’t wanna push 6 XML files when I can do it with one.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload