CODEWITHSUNDEEP
csssvg
Spearfisher
Spearfisher

Reputation: 8773

SVG - Different stroke width on different svg items

I am trying to apply the same stroke width to my CSS on my webpage using CSS:

path {
  fill: none;
  stroke-width: 10pt;
  stroke: red;
}

However the rendering is completely different on some SVG. Here is an example: http://jsfiddle.net/kaoo1jdb/

It should be quite straightforward but it's not. I am guessing it is due to scaling effect but I don't know how to fix it.

Does anyone have any idea?

Many thanks

Upvotes: 1

Views: 1724

Answers (1)

Paulie_D
Paulie_D

Reputation: 114990

The viewboxes of the two SVG are quite different...one is 7 times the size of the other.

So....to get the same effect you must use the same multiplier for px size (at least as an interim step pending other options)

JSfiddle 

#A path {
  fill: none;
  stroke-width: 10;
  stroke: red;
}

#B path {
  fill: none;
  stroke-width: 70;
  stroke: red;
}

svg {
    width:128px;
    height:128px;
}

You may be able to see what else might have a similar effect with a little more research.

Useful Article/tutorial

EDIT: A quick google gave me this property:

 vector-effect:non-scaling-stroke;

Reference Link

JSfiddle Demo 2

path {
  fill: none;
  stroke-width: 1;
  stroke: red;
  vector-effect:non-scaling-stroke;
}

Upvotes: 2

Related Questions