Scale SVG in one direction whilst preserving line width


#1

I am quite new to Hype. I wish to scale the width of an SVG inserted into a HTML widget, but only in one direction (x). Exploring the forums here, I can do that by setting the width to 100%. The SVG is a curved line with no fill. Scaling the SVG also scales the width of the line describing the curve. I wish to preserve the width of the line when the SVG is scaled. Line widths seem to be preserved for native objects in Hype when they are scaled during animation. See attached file for differences in how line width is preserved for SVG compared to native Hype objects.

Any advice welcome.

SVG scaling.hype.zip (22.0 KB)


#2

@WeaverD

Welcome to the Forum!

I did an internet search for “non-scaling-stroke” and came up with:
vector-effect=“non-scaling-stroke”

I placed this snippet in the widget’s code (below, top line) > which worked for me using your provided example:

 <path vector-effect="non-scaling-stroke"
          style="fill:none;stroke:#005A36;stroke-linecap:round;stroke-linejoin:round;stroke-width:2"
          id="80D09766"
          d="M221.359255268,1.05 C212.181409736,1.181807998346 203.000904899,1.356253757166 193.825660179,1.614828678317 C184.647770851,1.873478129286 175.459914764,2.21523512842 166.291878737,2.719375894437 C157.113904457,3.224063154597 147.898654032,3.89287844702 138.75773582,4.870829810807
C129.582625484,5.852439257291 120.260665141,7.174576338209 111.222891741,9.052997075445 C101.845748538,11.001952805 92.5777222064,13.5870865962 83.6866876007,17.1741941522 C73.7358207392,21.1888933735 64.6054630564,26.3153344701 56.1478453102,32.9360342939
C45.1905114156,41.5135345739 36.2393340359,51.9251669076 28.603885729,63.5186372193 C16.7996331524,81.4419137969 7.927684925607,102.600843778 1.05,122.849476076"/>

#3

Thank you @JimScott for the very quick response. Worked a treat. :smiley: