gpt4 book ai didi

css - SVG:不应用 CSS 属性

转载 作者:太空宇宙 更新时间:2023-11-04 11:48:54 25 4
gpt4 key购买 nike

我有一个包含 SVG 元素的 HTML 5 文件。还有一些在 CSS 文件中定义的样式(正确导入到 html 文件中),例如:

rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}

SVG 中的一个元素如下所示:

<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>

问题:除了内联 CSS 属性之外,此 rect 元素无法通过单元格边框获取属性。我完全不知道为什么。通常 CSS 文件有效,因为其他(非 SVG 但纯 HTML)元素的样式正确。我用 D3 生成 SVG 元素。

最佳答案

它在这个 fiddle 中起作用:http://jsfiddle.net/j0g8rnqu/1/

这意味着您的 css 和 svg 是正确的。您对 css 文件的绑定(bind)只能有问题。如果您以标准方式进行操作,它应该可以工作。这是最简单的情况:

文件 test.html

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="svg-test.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible">
<rect class="cell cell-border" width="256" height="256" style="fill: #79a;"></rect>
</svg>
</body>
</html>

文件 svg-test.css

rect.cell-border {
stroke: #000;
stroke-width:1.3px;
}

请注意,我向 svg 添加了 overflow="hidden" 以确保边框不会被裁剪。

关于css - SVG:不应用 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30784568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com