javascript - 样式化通过 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 不同。 <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;
}