Question

我正在尝试创建一个SVG文档，其中包含具有各种样式的多个元素的组。我想重用这些组，但每次使用时都要更改颜色方案。

在我看来，我可以为可重用组中的每个元素提供一个不同的@class，并为每个元素应用不同的样式表（CSS）。现在我只需要弄清楚当前的规格是否可行。

这是一个SVG，它说明了使用样式重用元素。

<?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>

该示例未完成的是将不同的样式表应用于第二个样式表。有没有办法将不同的样式表应用于每个组？例如，如何将第二对矩形设为黄色和绿色而不是红色和蓝色？或者也许他们被抚摸而不是被填满。

Answer 1

您无法在引用的特定<use>元素的元素上设置样式。您可以设置原始元素的样式，但这会影响对它们的所有引用。

但是，您可以通过直接在<use>元素本身上设置样式来更改绘制引用内容时使用的默认样式。这些样式将由任何没有直接设置其他样式的图形内容继承。

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

要使引用内容中的两个形状具有您可以指定的不同填充颜色，您可以让其中一个矩形使用默认填充颜色，其中一个矩形使用currentColor关键字进行填充。然后，您需要在每个fill元素（或其祖先）上指定color和<use>样式，否则您将获得系统默认填充和颜色，它们都是黑色。

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" />

Answer 2

基于Apply style sheet to only a specific element trait，样式表必须包含一些#id语法，如下所示：

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

引用第二个的@id

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

虽然第二个框同时包含.two的填充和＃pencil.two的笔划，所以在我的情况下我可能想在样式表的每个子句上使用id限定符来避免它们合并。

在SVG中有一种方法可以为每个<use>实例</use>应用不同的样式表（CSS）

2 个答案: