Question

我在一个html中遇到了几个svgs的问题，因为最后一个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>

Answer 1

如果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>

Answer 2

另一种方法，如果你知道每个svg的位置（所以第一个是1，第二个是2等）将在你的每个css规则的前面添加以下规则：

    svg:nth-of-type(1) .brush1 { fill: rgb(146,208,80); }
    svg:nth-of-type(1) .pen1 { stroke: none; }
    svg:nth-of-type(1) .pen2 { stroke: rgb(0,0,0); stroke-width: 2; stroke-linejoin: round; }
    svg:nth-of-type(1) .font0 { font-size: 73px; font-family: "Trebuchet MS"; }

查看它并不好玩，但除了向每个规则附加新的选择器之外，它还避免了向根svg元素添加id或类的需要。这是基于您原始示例的小提琴：

http://jsfiddle.net/crazytonyi/dRSNP/1/

如何不覆盖HTML中几个SVG的样式

2 个答案: