造型通過JS生成的SVG

Question

我有一個與一些JS生成的SVG。

我想樣式以下元素...

<g class="slice"> 
    <path fill="#ff7f0e" ></path> 
    <text>Better luck next time!</text> 
</g> 

我已經嘗試使用...

g.slice { 
    background: url(https://mdn.mozillademos.org/files/730/SVG_Stroke_Linecap_Example.png); 
    background-color: blue; 
} 

但它沒有任何效果。我已閱讀了關於使用<defs>並僅定義模式。它不是通過JS生成輸出的選項。

任何人都可以想到一個解決方案嗎？

Answer 1

background和background-color是樣式化HTML元素的CSS屬性。它們對於SVG元素無效。

SVG是一種完全不同的技術。事情和HTML不一樣。 A <g>就像是一個<div>，這就是你似乎在想的東西。

如果您想爲組「切片」內的元素設置彩色背景，則需要爲該組添加彩色矩形。

喜歡的東西：

<g class="slice"> 
    <rect x="<something>" y="<something>" width="<something>" height="<something>" 
      class="background"/> 
    <path fill="#ff7f0e" ></path> 
    <text>Better luck next time!</text> 
</g> 

.background { 
    fill: blue; 
}