<!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> <script> 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.setAttribute('xlink:href', '#b'); svgElt.appendChild(newUse); </script></body>两个都在Chrome的调试器中显示相同.为什么只出现一个?Two both appear the same in Chrome's debugger. Why does only one show up?谢谢,里克推荐答案您不能使用setAttribute设置xlink:href属性,需要使用setAttributeNSYou can't set an xlink:href attribute using setAttribute, you need to use setAttributeNSvar 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> 这篇关于我有两个&lt; use&gt;我的&lt; svg&gt;中的元素元素.一个出现,一个不出现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
08-04 01:20