Question

我遇到了一个问题，即在页面中内嵌嵌入了几个SVG文件的HTML页面，SVG中的CSS在页面级解释，而不是在SVG对象本身内部解释。例如：

<body>
<svg id="svg-one" style="width:150px; height:150px;">
  <style type="text/css">rect { fill:green; }</style>
  <rect x="5" y="5" height="100" width="100" />
</svg>
<svg id="svg-two" style="width:150px; height:150px;">
  <style type="text/css">rect { fill:red; }</style>
  <rect x="5" y="5" height="100" width="100" />
</svg>
</body>

两个矩形都以红色结束;第二个中的CSS会覆盖第一个中的CSS。

我的目标是让每个SVG文件能够自行下载并在其中包含自己的样式，以便正确显示，独立于其他SVG文件并与其他文件一起显示。鉴于id元素的<svg>可能会发生变化，我想到的最佳选择是将整个SVG内容包装在一个组中并适当地修改CSS：

<body>
<svg id="svg-one" style="width:150px; height:150px;">
  <style type="text/css">#ultimate-green-ness rect { fill:green; }</style>
  <g id="ultimate-green-ness"><rect x="5" y="5" height="100" width="100" /></g>
</svg>
<svg id="svg-two" style="width:150px; height:150px;">
  <style type="text/css">#ultimate-red-ness rect { fill:red; }</style>
  <g id="ultimate-red-ness"><rect x="5" y="5" height="100" width="100" /></g>
</svg>
</body>

这将允许下载的SVG版本与在线嵌入版本完全匹配，并且每个SVG都添加了一个组的缺点。

有没有更好的方法来隔离嵌入式SVG的嵌入式CSS？

Answer 1

这里有几个选项。由于您已经唯一地识别每个SVG元素，因此您可以使嵌入式规则更具体，因此在整页上下文中，它们仅适用于它们打包的SVG，即

svg#svg-one #ultimate-green-ness { properties here}

你也可以通过普通的svg属性设置填充（或其他任何东西），这样可以将你的样式从CSS名称空间中移除并防止冲突，然后样式显然会在每个元素级别上

<svg><rect fill="#ffffff" etc... />

请注意，您仍然可以使用外部样式表或JS代码覆盖这些样式。最后，为了继续你上面提出的想法，你可以给你的遗产提供ID，不需要那里的团体......

希望有所帮助。

编辑：更多选项...使用<def>来包含样式，然后将该Def应用于元素，或者只是在svg元素中添加“style”属性，尽管这不会扩展在你的情况下。

最后，为了解释您的情况，样式标记的堆叠方式与HTML中的方式相同，也就是说，如果HTML（或SVG）中有多个不同的块，浏览器只需将它们全部汇总为一个样式表和级联根据CSS规范。没有绕过那个。

规范在这里很有用...... http://www.w3.org/TR/SVG/styling.html#StylingWithCSS

在页面级解释内联SVG嵌入式CSS？

1 个答案: