Question

我试图在HTML模板中重用特定的SVG文件。为了保持我的模板清晰可辨，并且SVG道具可通过CSS配置，我使用＆＃39;使用＆＃39;从外部拉出SVG的元素。

Css Tricks提供了一个关于如何使用元素的精彩教程： http://css-tricks.com/svg-use-external-source/

我的困境是我需要在几个地方重复使用这个SVG，并希望为每个组提供不同的属性，如颜色，笔画等等。但是，我不能创建任何类型的上下文当使用＆＃39;使用＆＃39;时，例如用一个＆＃39; div包裹它？然后尝试根据该上下文对SVG进行样式化。

示例 http://jsfiddle.net/pathsofdesign/3bob8rat

HTML

<div class="Boxes-1">
    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height"100" viewBox="0 0 100 100">
        <g id="box-group">
            <g id='box-1'>
                <rect width="100" height="100" />     
            </g>
            <g id='box-2'>
                <rect x="25" y="25" width="50" height="50" />     
            </g>
        </g>
    </svg>
</div>

<div class="Boxes-2">
    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height"100" viewBox="0 0 100 100">    
        <!-- Pull in #box-group set from SVG above -->
        <use xlink:href="#box-group"></use>
    </svg>
</div>

CSS

#box-1 {
    fill: red;
}

/* Does Work */
#box-group #box-2 {
    fill: blue;
}

/* Does NOT Work */
.Boxes-2 #box-group #box-2 {
    fill: purple !important;
}

Answer 1

使用use（由于深度克隆发生的方式），您只能将CSS选择器应用于原始元素的子项，并且还会克隆所有应用的样式。但是，您无法将任何CSS选择器应用于克隆及其子项。

来自http://www.w3.org/TR/SVG/struct.html#UseElement：

CSS2选择器可以应用于原始（即引用）元素，因为它们是正式文档结构的一部分。 CSS2选择器不能应用于（概念上）克隆的DOM树，因为它的内容不是正式文档结构的一部分。

但是，您可以使用继承以某种方式解决问题。

但是，属性继承的工作方式就好像引用的元素在文本上被包含为'use'元素的深度克隆子元素一样。引用的元素继承了'use'元素和'use'元素的祖先的属性。引用元素的实例不会从引用元素的原始父元素继承属性。

因此，对于要在所有克隆中应用的样式，您在原始内容上使用CSS选择器（例如#box-1始终为红色fill）并且对于更改元素将样式应用于包含元素（父母）并将其继承到包含的元素（例如#box-2然后可以继承父母的不同填充）。例如，有这样的事情：

#box-1 {
    fill: red; /* gets applied to the original and all clones */
}  
.Boxes-1 {
    fill: green; /* will be inherited by the original #box-2 */
}
.Boxes-2 {
    fill: purple; /* will be inherited by the cloned #box-2 */
}

使用<use> </use>时，使用HTML / CSS对SVG进行语境化

1 个答案:

DEMO