我对一个 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><image function></title>
</head>
<body>
<h1><image function></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 一个 id 或 class。等
<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/