CODEWITHSUNDEEP
htmlcsssvg
markus0074
markus0074

Reputation: 319

How to not override the Styling of several SVGs in a HTML

I have an issue with several svgs inside one html, because the last svg overrides all svg styles before.

As you can see the green item will be drawn as a violet one. So the style of the last svg will be used.

Is there a possibility to use the style locally for the svg inside? Futher I don't want to use the svg as a img or object.

Thanks and best regards

Markus

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

Upvotes: 3

Views: 1271

Answers (2)

Anthony
Anthony

Reputation: 37065

Another approach, if you know the position of each svg (so the first is 1, the second is 2, etc) would be to add the following rule in front of each of your css rules for that style block:

    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"; }

It's not fun to look at, but it avoids the need to add an id or class to the root svg element in addition to appending a new selector to each rule. Here's a fiddle based on your original example:

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

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101918

If the SVGs are inline like that then yes, the CSS from the second SVG will over-write the first. It is just like if you had:

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

The SVGs aren't self-contained. They are part of the document as a whole.

If you need the rules to apply to their own SVG, then you will need to do something to make them more specific. Such as renaming the classes, or giving the SVG an id or class. etc.

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

Upvotes: 2

Related Questions