Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Andrew Folts
Andrew Folts
14,238 Points
Posted by Andrew Folts
Andrew Folts
14,238 Points

Smarter way to handle "non-scaling stroke" for a large number of SVGs?

I have a number of different semi-complex animated SVGs on my portfolio site. I don't want their stroke widths to change as the SVGs scale (I want them to have fixed stroke widths).

I'm currently targeting all SVG elements with a stroke set and adding "non-scaling-stroke" to them. This seems inefficient.

Does anyone know of a better way?

Thanks!

efewafewa
efewafewa
21,825 Points

Mind pasting the relevant code?

Andrew Folts
Andrew Folts
14,238 Points
Andrew Folts
Andrew Folts
14,238 Points

Ok, here's an example.

I have a complex SVG scene for the intro of the site. It spans the width of the screen, so when it scales down to mobile, the strokes are TINY... almost imperceptible.

If I add "non-scaling-stroke" to every SVG element with Javascript, I can keep the stroke width static, regardless of the overall size. But that's incredibly inefficient.

I'm wondering if there's a better way.

<svg version="1.1" id="hero-scene2" class='hero thick' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="2880px" height="875px" viewBox="0 0 2880 875" enable-background="new 0 0 2880 875" xml:space="preserve">
<line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="710" y1="781.5" x2="799" y2="781.5"/>
<line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="967" y1="781.5" x2="1055" y2="781.5"/>
<polyline opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" points="1055,715.5 1006.5,715.5
    1006.5,763.5 1055,763.5 "/>
<line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="1033.76465" y1="780.06543" x2="1037.91553" y2="741.65234"/>
<g>

        <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="711" y1="421.5" x2="799" y2="421.5"/>
    <g>

            <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="753.5" y1="422" x2="753.5" y2="441"/>

            <ellipse opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="754.96802" cy="446.69727" rx="6.3645" ry="6.31055"/>
    </g>
</g>
<g>

        <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="841" y1="421.5" x2="928" y2="421.5"/>
    <g>

            <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="883.5" y1="422" x2="883.5" y2="441"/>

            <ellipse opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="884.47339" cy="446.69727" rx="6.3645" ry="6.31055"/>
    </g>
</g>
<ellipse opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="901.3042" cy="798.81543" rx="9.22412" ry="9.14551"/>
<g>

        <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="841" y1="590.5" x2="928" y2="590.5"/>
    <g>

            <line opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" x1="883.5" y1="591" x2="883.5" y2="611"/>

            <ellipse opacity="0.1" fill="none" stroke="#000000" stroke-width="5" stroke-miterlimit="10" cx="884.47339" cy="615.71289" rx="6.3645" ry="6.31152"/>
    </g>
</g>
<g>

***I cut a lot off because it's quite large***

</svg>