CODEWITHSUNDEEP
google-chromecss
chris Frisina
chris Frisina

Reputation: 19688

Reset or Override user agent stylesheet

I am using SVGs, and for some reason, the height is set to 289 px by the user agent stylesheet.

I dont want to define the height, as I will be using many SVGs (like at least 256), and dont want to set different css rules manually for each of them by using !important.

So how do I adjust the user stylesheet (using Chrome) or reset the height field for SVGs!, so that it is not defined?

example SVG HTML: (SVG height is 25 px, yet the svg Bounding box renders to 289)

<div id="measure<%= measure.cid %>" class="measure">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="10" y="10" width="250" height="25" style="stroke:black; stroke-width:2; fill:lightgray;" />
    <div id="<%= beatHolder %>">
    </div>
  </svg> 
</div>

css css2

When trying Alex W's answer, I get this: enter image description here

Upvotes: 0

Views: 3643

Answers (2)

Mitchell Layzell
Mitchell Layzell

Reputation: 3058

Okay so after playing with your example, I've come up with an answer for you. When using svg its computed style height is set from its parent element, so with that being said you would have to place your svg inside a div that has a width and height so I made a quick little example of how this would be used, so lets say we want to put a svg as a logo and then one for a banner or something we would accomplish this by doing your svg like this,

CSS

.logo {
    width: 250px;
    height: 27px;
}
.navigation {
    width: 960px;
    height: 54px;
}

HTML

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="250" height="25" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>
<div class="navigation">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect width="960" height="50" stroke="black" stroke-width="2" fill="lightgray" />
  </svg> 
</div>

Upvotes: 1

Alex W
Alex W

Reputation: 38193

Can't you just add the rule to your stylesheet?

<style type="text/css">
 ...
svg { height: auto !important; }
</style>

You want to put that rule at the very bottom of the style tags to make sure it takes priority.

Also, in your code example it seems you are setting the rect to be 25 pixels, but not the actual <svg> element.

Upvotes: 1

Related Questions