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>完全不同，这就是您的想法。

如果你想为组内的元素设置彩色背景＆＃34;切片＆＃34;你需要在那个组中添加一个彩色矩形。

类似的东西：

<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;
}

设计通过JS生成的SVG样式

1 个答案: