svg - How can I set stroke-width on a path after it's been transformed? -
i have svg file of 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 huge black border when want show 0.5px border. how can stroke-width apply after transform? if isn't possible, what's easiest way wrap element displays correctly? i'd avoid modifying "d" attribute.
you 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 ie9/10 don't implement webkit, opera , firefox do.
Comments
Post a Comment