CODEWITHSUNDEEP
csssvg
Mutant Bob
Mutant Bob

Reputation: 3549

In SVG is there a way to apply a different style sheet (CSS) to each <use> instance

I am trying to create an SVG document containing groups of multiple elements with a variety of styles. I want to reuse these groups, but change out the color scheme with each use.

It occurs to me that I could give each element in the reusable group a different @class and apply a different style sheet (CSS) to each element. Now I just need to figure out if this is possible with the current specifications.

Here is an SVG that illustrates reuse of an element with styling.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    width="744.09448819"
    height="1052.3622047"
    id="svg2"
    version="1.1"
    inkscape:version="0.48.4 r9939"
    sodipodi:docname="blocks-stackoverflow.svg">
  <style type="text/css">
    .one {
    fill:#f00;
    }
    .two {
    fill:#44f;
    }
  </style>
  <defs
      id="defs4">
    <g id="bacon">    <rect
    class="one"
    id="rect3011"
    width="31.428572"
    height="51.42857"
    x="108.57143"
    y="209.50504" />
    <rect
    class="two"
    id="rect3013"
    width="80"
    height="40"
    x="120"
    y="249.50504" />
    </g>
  </defs>
  <g
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1">
    <use xlink:href="#bacon" x="0" y="0"/>
    <use xlink:href="#bacon" x="100" y="200"/>
  </g>
</svg>

What the example does NOT accomplish is applying a different style sheet to the second . Is there a way to apply a different style sheet to each of a group? For example, how can I make the second pair of rectangles yellow and green instead of red and blue? Or maybe they're stroked instead of filled.

Upvotes: 0

Views: 263

Answers (2)

AmeliaBR
AmeliaBR

Reputation: 27544

You can't set styles on elements referenced by a specific <use> element. You can style the original elements, but that affects all references to them.

However, you can change the default styles used when drawing the referenced content by setting styles directly on the <use> element itself. These styles will be inherited by any graphics content that doesn't have other styles set on it directly.

A demo I put together recently showing style possibilities on referenced icons.

To have two shapes within your referenced content have different fill colours that you can specify, you can have one of your rectangles use the default fill colour, and one of your rectangles use the currentColor keyword for fill. Then you need to specify both fill and color styles on each <use> element (or its ancestor), otherwise you'll get the system default fill and color, which are both black.

Example using your code.

<style>
.one {
    fill:inherit;
}
.two {
    fill:currentColor;
}
</style>

    <use xlink:href="#bacon" x="0" y="0" 
        style="fill:red;color:blue" />
    <use xlink:href="#bacon" x="100" y="200"
        style="fill:green;color:yellow" />

Upvotes: 1

Mutant Bob
Mutant Bob

Reputation: 3549

Based on Apply style sheet to only a specific element trait the style sheet must include some #id syntax like this:

 <style type="text/css">
    .one {
    fill:#f00;
    }
    .two {
    fill:#44f;
    }
    #pencil .one {
    fill:#0f0;
    }
    #pencil .two {
    stroke:#ff0;
    }
  </style>

referencing the @id of the second 

<use xlink:href="#bacon" x="100" y="200" id="pencil"/>

Although the second box will have both the fill from .two and the stroke from #pencil.two , so in my case I'd probably want to use the id qualifier on every clause of the style sheet to avoid them being combined.

Upvotes: 0

Related Questions