造型通过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生成输出的选项。

任何人都可以想到一个解决方案吗？

来源

2017-05-04 Liam

为什么不定义生成的输出与JS的选择一种模式？只是让JS输出也是一个模式。 –

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

来源

2017-05-04 13:20:09

造型通过JS生成的SVG

回答

相关问题