gpt4 book ai didi

html - 如何不覆盖 HTML 中多个 SVG 的样式

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

我对一个 html 中的多个 svg 有疑问,因为最后一个 svg 覆盖了之前的所有 svg 样式。

如您所见,绿色元素将被绘制为紫色元素。所以将使用最后一个 svg 的样式。

是否有可能在本地使用 svg 内部的样式?此外,我不想将 svg 用作 img 或对象。

谢谢和最好的问候

马库斯

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>&lt;image function&gt;</title>
</head>
<body>
<h1>&lt;image function&gt;</h1>
<div>
GREEN ITEM
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" height="2.943661971830986in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 3141 2097" width="4.408450704225352in">
<!--Generator wmf2svg ZF Patch (1)-->
<style type="text/css">
.brush1 { fill: rgb(146,208,80); }
.pen1 { stroke: none; }
.pen2 { stroke: rgb(0,0,0); stroke-width: 2; stroke-linejoin: round; }
.font0 { font-size: 73px; font-family: "Trebuchet MS"; }
</style>
<g>
<polygon class="pen1 brush1"
points="0,109 118,424 141,315 264,386 370,201 248,130 330,54 0,109"></polygon>
<text class="font0" fill="rgb(0,0,0)" stroke="none"
style="dominant-baseline: auto;" x="566" xml:lang="en" xml:space="preserve"
y="520" lang="en">GREENITEM</text>
</g>
</svg>
</div>
her is some content
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd" height="3.4991304347826087in" preserveAspectRatio="none" stroke-linecap="round" viewBox="0 0 3124 2012" width="5.43304347826087in">
<!--Generator wmf2svg ZF Patch (1)-->
<style type="text/css">
.brush1 { fill: rgb(95,0,159); }
.pen1 { stroke: none; }
.brush2 { fill: rgb(127,0,223); }
</style>
<g>
<polygon class="pen1 brush1"
points="0,109 118,424 141,315 264,386 370,201 248,130 330,54 0,109"></polygon>
<polygon class="pen1 brush2"
points="451,375 527,294 597,416 782,308 711,186 820,162 507,46 451,375"></polygon>
</g>
</svg>
</div>
</body>
</html>

最佳答案

如果 SVG 是内联的,那么是的,来自第二个 SVG 的 CSS 将覆盖第一个。就像你有:

<html>
<div>
<style>
</style>
</div>
<div>
<style>
</style>
</div>
</html>

SVG 不是独立的。它们是整个文档的一部分。

如果您需要将规则应用于自己的 SVG,那么您将需要做一些事情来使它们更具体。例如重命名类,或给 SVG 一个 idclass。等

<svg id="green" ... >
<!--Generator wmf2svg ZF Patch (1)-->
<style type="text/css">
#green .brush1 { fill: rgb(146,208,80); }
#green .pen1 { stroke: none; }
#green .pen2 { stroke: rgb(0,0,0); stroke-width: 2; stroke-linejoin: round; }
#green .font0 { font-size: 73px; font-family: "Trebuchet MS"; }
</style>

关于html - 如何不覆盖 HTML 中多个 SVG 的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23783453/

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