javascript - embedding SVG in SVG - Stack Overflow

admin管理员组

文章数量:1397093

I couldn't find the way how to embed two SVGs into SVG document. I need to do it with ability of code which would manipulate with both child SVG-s, and would like to have independent coordinates on both of those areas. I don't like to do it in HTML, because I consider it too limiting paring to SVG. Many thanks!

I couldn't find the way how to embed two SVGs into SVG document. I need to do it with ability of code which would manipulate with both child SVG-s, and would like to have independent coordinates on both of those areas. I don't like to do it in HTML, because I consider it too limiting paring to SVG. Many thanks!

• javascript
• xml
• svg
• coordinates

Share Improve this question Follow asked Nov 6, 2011 at 17:08 AlexAlex 3,27777 gold badges3737 silver badges5151 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

An SVG document fragment consists of any number of SVG elements contained within an ‘svg’ element.

• Source: http://www.w3/TR/SVG/struct.html#NewDocument

Basically:

<svg …>
  <svg id="a" …>…</svg>
  <svg id="b" …>…</svg>
</svg>

<svg>
...
     <image x="..." y="..." width="..." height="..." xlink:href="path/to/your/file.svg" ></image>
...
</svg>

One of solution is '[parent svg] - [g] - [child svg]' structure.

<svg>
    <g transform="translate(-,-)">
        <svg>
            ...
        </svg>
    </g>
</svg>

You can set the cordinate of child svg as transform(translate) of g element.

demo:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html

本文标签： javascriptembedding SVG in SVGStack Overflow