gpt4 book ai didi

css - 在页面级别解释的内联 SVG 嵌入式 CSS?

转载 作者:行者123 更新时间:2023-11-28 10:03:40 24 4
gpt4 key购买 nike

我遇到过这样一个问题:给定一个 HTML 页面,页面中内嵌了多个 SVG 文件,SVG 中的 CSS 在页面级别进行解释,而不是在 SVG 对象本身内部进行解释。例如:

<body>
<svg id="svg-one" style="width:150px; height:150px;">
<style type="text/css">rect { fill:green; }</style>
<rect x="5" y="5" height="100" width="100" />
</svg>
<svg id="svg-two" style="width:150px; height:150px;">
<style type="text/css">rect { fill:red; }</style>
<rect x="5" y="5" height="100" width="100" />
</svg>
</body>

两个矩形最终都是红色的;第二个中的 CSS 覆盖第一个中的 CSS。

我的目标是让每个 SVG 文件都能够独立下载并在其中具有自己的样式以正确显示,独立于其他文件并与其他文件一起显示。鉴于 id<svg>元素可能会改变,我想到的最佳选择是将整个 SVG 内容包装在一个组中并适当修改 CSS:

<body>
<svg id="svg-one" style="width:150px; height:150px;">
<style type="text/css">#ultimate-green-ness rect { fill:green; }</style>
<g id="ultimate-green-ness"><rect x="5" y="5" height="100" width="100" /></g>
</svg>
<svg id="svg-two" style="width:150px; height:150px;">
<style type="text/css">#ultimate-red-ness rect { fill:red; }</style>
<g id="ultimate-red-ness"><rect x="5" y="5" height="100" width="100" /></g>
</svg>
</body>

这将允许下载版本的 SVG 与在线嵌入式版本完全匹配,缺点是每个 SVG 都会添加一个组。

有没有更好的方法来隔离内联 SVG 的嵌入式 CSS?

最佳答案

这里有几个选项。由于您已经唯一标识了每个 SVG 元素,因此您可以使嵌入规则更加具体,以便在整个页面上下文中,它们仅适用于与它们一起打包的 SVG,即

svg#svg-one #ultimate-green-ness { properties here}

你也可以通过普通的 svg 属性设置填充(或其他任何东西),这将使你的样式脱离 CSS 命名空间并防止冲突,样式显然会在每个元素级别上

<svg><rect fill="#ffffff" etc... />

请注意,您仍然可以使用外部样式表或 JS 代码覆盖这些样式。最后,为了继续你上面建议的想法,你可以只给你的 rects 提供 ID,那里不需要一个组......

希望对您有所帮助。

编辑:更多选项...使用 <def>包含样式,然后将该 Def 应用到元素,或者简单地在 svg 元素中放置一个“style”属性,尽管这在您的情况下不能很好地扩展。

最后,为了解释你的情况,样式标签的堆叠方式与 HTML 中的方式相同,也就是说,如果你的 HTML(或 SVG)中有几个不同的 block ,浏览器会简单地将它们全部连接成一个有效的 block 根据 CSS 规范的样式表和级联。无法回避。

规范在这里很有用... http://www.w3.org/TR/SVG/styling.html#StylingWithCSS

关于css - 在页面级别解释的内联 SVG 嵌入式 CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20078032/

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