使用jQuery克隆一组svg元素

时间:2016-11-02 05:08:01

标签: jquery svg

我在g元素中标记了以下四个svg路径:id =" myUniqueID"和class =" section113":

<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="905.1372px" height="1100px" viewBox="0 300 721.464 889.561" enable-background="new 0 0 721.464 889.561"
 xml:space="preserve">

<g id="myUniqueID" class = "section113" >

 <g id="section113r1"> <path
        23fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 359.6289,535.40475 0.11199,3.61667 34.29601,0 0.11199,-3.62489 z"
        id="section113r1"
        inkscape:connector-curvature="0" /></g>

    <g id="section113r2">   <path
        23fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:0.0101289;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 359.67072,531.00614 0.11195,4.30938 34.28613,0 0.11195,-4.31918 z"
        id="section113r2"
        inkscape:connector-curvature="0" /></g>

        <g id="section113r3">   <path
        23fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:0.00303446;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 359.77102,527.12101 0.11198,3.79554 34.29288,0 0.11198,-3.80416 z"
        id="section113r3"
        inkscape:connector-curvature="0" /></g>

            <g id="section113r4">  <path
        23fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        d="m 359.58489,523.3875 0.11199,3.66343 34.29602,0 0.11199,-3.67176 z"
        id="section113r4"
        inkscape:connector-curvature="0" /></g>
</g>

这是我的小提琴:https://jsfiddle.net/bujfd107/3/

我想将我的四条路径克隆到div容器中,其中id =&#34;缩放框&#34;。

我无法将代码格式化为此帖子上的代码,因此请仔细查看我已经尝试过的所有策略(使用jquery至少有3种不同的策略,以及更多与d3)。

我希望克隆到该容器中的四条路径,但扩大了两倍,仍然接受像原件一样的工具提示效果。 谢谢你

0 个答案:

没有答案