Question

在svg文档中，我可以为svg根元素分配一个背景颜色，如下所示：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1"
     width="100%" height="100%">
<style>
   :root {
      background: blue;
   }
</style>
<circle cx="50%" cy="50% r="25%" fill="orange">
</svg>

但是当svg插入到html页面中时：root引用html标记，而不是svg根元素。由于很多原因，我必须通过样式元素设置svg根元素的背景样式，所以例如我不能添加样式=＆＃34;背景：蓝色＆＃34;属性为svg元素或使用javascript。有什么想法吗？

Answer 1

只需通过svg { ... }应用背景样式。

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink"
     version="1.1"
     width="100%" height="100%">
<style>
   svg {
      background: blue;
   }
</style>
<circle cx="50%" cy="50%" r="25%" fill="orange"/>
</svg>

另请注意：我已修复损坏的<circle>元素。

Answer 2

您真的需要嵌入<style>吗？

如果没有，只需创建两个类来设置svg的样式，并使用currentColor中的CSS变量<circle>，以便能够使用CSS {{1}更改其fill } property。

注意：由于SVG在XML中定义了基于矢量的图形，因此您需要使用color关闭<circle>元素。

.svg__container {
  background-color: blue;
  width: 100%;
  height: 100%;
}
.svg__circle {
  color: orange;
}

在html页面中设置svg根元素

2 个答案: