CODEWITHSUNDEEP
htmlsvg
cosimo
cosimo

Reputation: 23

Stretching specific layers within SVG element

I am trying to create a rather complex SVG interface, composed of several graphical layers.

I want some of the layers (i.e., "g" elements within the SVG) to be stretched when resizing the browser window, by using the viewBox attribute. Other layers in the same SVG should be scaled or handled individually. And that's where i run into problems.

I would have liked to be able to do the following:

<svg>
    <g name="stretchable" width="900px" height="500px" viewBox="0px 0px 900px 500px">
        ...insert stretchable shapes here...
    </g>
    <g name="non-stretchable">
        ...insert other shapes here...
    </g>
</svg>

...and then stretch the "stretchable" g element only, by manipulating the viewBox attribute. But apparently, the viewBox attribute is not applicable in the g element.

Is there any other way to stretch a specific "g" element within an SVG, and not have to stretch the whole SVG?

Upvotes: 2

Views: 578

Answers (1)

Robert Longson
Robert Longson

Reputation: 124059

Why not use a <svg> element instead of a <g> element. It does allow using a viewBox attribute.

If that's no good you could always experiment with adding a transform="scale(x,y)" to the <g> element where x and y are numeric scale factors you would need to calculate.

BTW <g> elements don't support width or height attributes either although <svg> elements do.

Upvotes: 2

Related Questions