CODEWITHSUNDEEP
svg
ckersch
ckersch

Reputation: 7687

How does sizing work for nested SVGs?

I'm trying to set up some nested SVGs in d3 so that I can encapsulate some small graphs in a larger canvas.

My problem is that I can't seem to get the inner SVGs to correctly size with regards to width and height. I tried something like this:

<svg width='500' height='500'>
    <svg width='200' height='200' x='10' y='10'>
        <rect x='10' y='10' height='20' width='20'></rect>
    </svg>
</svg>

The outer SVG sizes itself correctly, but the inner SVG is given a height and width of 10 each. (i.e. it is sizing around the rectangle.) I'd like to set it to a height and width of 200 each.

How do I accomplish this, either in HTML or else with javascript?

Fiddle is here.

Upvotes: 1

Views: 121

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The SVG is the correct size. You can see that if you put a 100% by 100% rectangle in the background.

<svg width='500' height='500'>
    <svg width='200' height='200' x='10' y='10'>
        <rect height='100%' width='100%' fill="orange"></rect>
        <rect x='10' y='10' height='20' width='20'></rect>
    </svg>
</svg>

Demo here

I don't know why you are saying it is only 10x10. What makes you think that?

Upvotes: 1

Related Questions