![](/img/trans.png)
[英]How can I determine the viewBox of any <svg> Element from JavaScript?
[英]How can I set a viewBox on an SVG element created with JavaScript?
当我在DOM中已经存在的SVG元素上使用setAttribute('viewBox')时,将对其进行正确设置(使用大写的'b')。
当我在JavaScript中创建SVG元素并在其中添加'viewBox'属性时。 。 。 它以所有小写字母结尾在DOM中。
为什么是这样?
document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20'); let svg = document.createElement('svg'), circle = document.createElement('circle'); circle.setAttribute('cx', 200); circle.setAttribute('cy', 200); circle.setAttribute('r', 10); svg.setAttribute('viewBox', '190 190 20 20'); svg.appendChild(circle); document.body.appendChild(svg); // document.querySelector('#circleGenerated svg').setAttribute('viewBox', '190 190 20 20');
svg { border: 2px dashed #666; width: 200px; height: 200px; }
<p>Existing svg with dynamically added viewBox attribute:</p> <div id="circle"> <svg> <circle cx="200" cy="200" r="10" id="center-point" fill="#bbb" /> </svg> </div> <p>Generated svg with dynamically added viewBox attribute:</p>
您必须使用document.createElementNS("http://www.w3.org/2000/svg", "svg")
代替document.createElement('svg')
document.querySelector('#circle svg').setAttribute('viewBox', '190 190 20 20'); let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); circle.setAttribute('cx', 200); circle.setAttribute('cy', 200); circle.setAttribute('r', 10); svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); svg.setAttribute('viewBox', '190 190 20 20'); svg.appendChild(circle); document.body.appendChild(svg); // document.querySelector('#circleGenerated svg').setAttribute('viewBox', '190 190 20 20');
svg { border: 2px dashed #666; width: 200px; height: 200px; }
<p>Existing svg with dynamically added viewBox attribute:</p> <div id="circle"> <svg> <circle cx="200" cy="200" r="10" id="center-point" fill="#bbb" /> </svg> </div> <p>Generated svg with dynamically added viewBox attribute:</p>
首先,您并不是在创建有效的SVG元素。 您不能使用createElement创建SVG元素(仅用于HTML元素)。 您必须使用createElementNS并提供SVG名称空间作为第一个参数。
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.