Why nest an <svg> element inside another <svg> element?

前端未结

关注

 4  387

感情败类

Why would a demo such as this: http://jsbin.com/ejorus/2/edit, have an element nested inside another element?

相关标签:

4条回答

北恋

2020-12-28 14:00
Nesting SVG elements can be useful to group SVG shapes together, and position them as a collection. All shapes nested inside an svg element will be positioned (x, y) relative to the position (x, y) of its enclosing svg element. By moving the x and y coordinates of the enclosing svg element, you move all the nested shapes too.

Here is an example where two rectangles are nested inside two svg elements. Except for the colors the two rectangles have the same definitions for x, y, height, and width. The enclosing svg elements have different x-values. Since the x-position of the rectangles are interpreted relative to their enclosing svg elements x-position, the two rectangles are displayed at different x-positions.

- By Jakob Jenkov
```
<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#009900; fill: #00cc00"/>
  </svg>
</svg>
```
Credits
0 讨论(0)
发布评论:

提交评论
- 加载中...

孤城傲影

2020-12-28 14:01

You can define a new viewport & viewbox. With this option, you can use relative positions like as css. For more information, you can see this online article.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Nested SVG</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <svg width="100%" height="100%">
        <rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
        <svg x="25%" y="25%" width="50%" height="50%">
            <rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
        </svg>
    </svg>
</body>

</html>

0 讨论(0)

深忆病人

2020-12-28 14:09

I am about to do this for an entirely different reason: website implementation efficiency.

I have several SVG files that I insert into my web page after downloading them via AJAX. I want to consolidate them into one file because that's better for downloading. I could do this with a text file and then insert the SVG text into a web page element's innerHTML property, but .svg files offer two additional advantages over .txt files:

1) The standard .svgz format allows you to store pre-zipped files on the web server, no need for mod_deflate. SVG files zip very efficiently, I'm seeing 70-85% compression.

2) The web browser parses the SVG outside of my javascript code, hopefully more efficiently. To insert the svg element into the HTML, I use the parent element's insertBefore or appendChild method instead of innerHTML.

0 讨论(0)
发布评论:

提交评论
- 加载中...
被撕碎了的回忆

2020-12-28 14:22

You're right (as you say in Mr. Alien's answer) that both SVG elements have the same relative positions, and indeed the graph displays fine without the outer SVG.

The reason I added it is because the JavaScript (which I needed to stop the labels getting squished) uses the SVG element's transform matrix (caused by the applied viewBox attribute) to unscale the text.

Unfortunately the returned matrix doesn't take account of transformations applied to the SVG element itself, so I needed to get the transform matrix relative to an outer element that used the initial coordinate system instead. Hope that helps.

0 讨论(0)
发布评论:

提交评论
- 加载中...