在html頁面中設置svg根元素

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根元素。 由於很多原因，我必須通過style元素設置svg根元素的背景樣式，所以例如我不能將style =“background：blue”屬性添加到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的樣式，並在<circle>使用CSS變量currentColor ，以便能夠使用CSS color屬性更改其fill 。

注意：由於SVG在XML中定義了基於矢量的圖形，因此您需要使用/關閉<circle>元素。

---

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

 <svg class="svg__container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <circle class="svg__circle" cx="50%" cy="50%" r="25%" fill="currentColor" /> </svg>