CODEWITHSUNDEEP
svg
Mike
Mike

Reputation: 25022

How can I set stroke-width on a path after it's been transformed?

I have an SVG file of the form:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

The image displays with a huge black border when I want it to show up with a 0.5px border. How can I get the stroke-width to apply after the transform? If this isn't possible, what's the easiest way to wrap the element so that it displays correctly? I'd like to avoid modifying the "d" attribute.

Upvotes: 0

Views: 826

Answers (1)

Robert Longson
Robert Longson

Reputation: 124249

You could use vector-effect="non-scaling-stroke"

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path vector-effect="non-scaling-stroke" d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

One caveat is that IE9/10 don't implement this but Webkit, Opera and Firefox do.

Upvotes: 5

Related Questions