发表新帖
发表新帖

I have two elements in my <svg> element. One appears, one doesn't

后端 未结
关注
1 923
囚心锁ツ
囚心锁ツ 2021-01-28 12:36

One of the use elements is created dynamically, one is created statically. I have written a jsfiddle.

https://jsfiddle.net/rhedin/r0dbf6uy/6/
相关标签:
1条回答
  • 深忆病人
    2021-01-28 12:59

    You can't set an xlink:href attribute using setAttribute, you need to use setAttributeNS

    var svgElt = document.getElementById('svg_box');
var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
newUse.setAttribute('x', '150px');
newUse.setAttribute('y', '10px');
newUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b');
svgElt.appendChild(newUse);
    <!doctype html>
<body>
    <svg
     id="svg_box"
     width="200px"
     height="100px"
     viewBox="0 0 200 100"
     style="background-color:pink"
    >
        <defs>
            <g id="b">
                <path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
            </g>
        </defs>
        <use x="130px" y="10px" xlink:href="#b" /> 
    </svg>

</body>

    0 讨论(0)
 看不清?
提交回复
热议问题