svg - "vector-effect" when set to non-scaling-stroke but scaled in parent div -
svg - "vector-effect" when set to non-scaling-stroke but scaled in parent div -
i want maintain stroke width of svg if parent scaled.
i trying code below;
<svg version="1.2" baseprofile="tiny" viewbox="-100 -100 200 200"> <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect> </svg> and above works great, want below;
<div style="-webkit-transform: scale(5,5);"> <svg version="1.2" baseprofile="tiny" viewbox="-100 -100 200 200"> <rect vector-effect="non-scaling-stroke" x="-20" y="-20" width="40" height="40" rx="5" ry="5" stroke="red" stroke-width="2" fill="none"></rect> </svg> </div> so if parent dive scaled 5, output of stroke scaled 5. want maintain stroke width of rect fixed size of 2 parent div scaled. may help?
svg webkit scaletransform
Comments
Post a Comment