覆盖 SVG 中的文本样式
[英]Override text style in SVG
问题描述
如何覆盖 SVG 标签中的文本样式。 当我单击时，我在图表的图例中将以下文本装饰作为直通，我需要它是文本装饰：无，但我无法覆盖它。 知道我该如何解决吗？
<text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text>
4 个解决方案
解决方案1
1 已采纳 2020-12-13 21:36:14
您可以像这样覆盖样式属性。
document.querySelector('text').style = 'font: 14px sans-serif; text-decoration: none';
或者直接像这样的文字装饰。
document.querySelector('text').style.textDecoration = 'none';
解决方案2
1 2020-12-13 22:03:22
您可以在点击文本时添加事件：
<html> <body> <text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text> <script> document.querySelector("text").addEventListener("click", function() { document.querySelector('text').style.textDecoration = 'none'; }); </script> </body> </html>
解决方案3
0 2020-12-13 21:45:41
您可以使用 d3 javascript 库。 它可以轻松管理 svg 元素。
<script src="https://d3js.org/d3.v5.js"></script>
<text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text>
<button onclick="change()">Click</button>
<script type="text/javascript">
function change(){
d3.select('text').style('text-decoration', 'none');
}
</script>
解决方案4
0 2020-12-14 23:59:11
这是 CSS 版本：
text { font: 14px sans-serif; text-decoration: line-through; } #btnControl { display: none; } #btnControl:checked + label > text { text-decoration: none; }
<input type="checkbox" id="btnControl"> <label class="btn" for="btnControl"><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" id="text">Customer</text></label>
我从 TylerH那里拿了这个。
它增加了一点 HTML 和 CSS 但如果这是你想要的，它会避免 Javascript。 当然，如果您需要对多个元素使用不同的 ID 名称，我建议您使用不同的 ID 名称。
无法将CSS样式应用于SVG文本元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.