在用JavaScript创建的SVG元素上设置viewBox,可以通过以下步骤实现:
document.createElementNS
方法创建一个SVG元素,指定命名空间为"http://www.w3.org/2000/svg",例如:const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");setAttribute
方法设置SVG元素的viewBox属性,该属性定义了SVG元素的可视区域。viewBox属性的值是一个字符串,由四个参数组成,分别表示可视区域的左上角x坐标、左上角y坐标、宽度和高度。例如:svg.setAttribute("viewBox", "0 0 500 500");在上述示例中,viewBox的值为"0 0 500 500",表示可视区域的左上角位于坐标(0, 0),宽度为500,高度为500。
appendChild
方法将SVG元素添加到文档中的某个容器元素中,例如:const container = document.getElementById("container");
container.appendChild(svg); 在上述示例中,假设容器元素的id为"container",通过getElementById
方法获取到该容器元素,并将SVG元素添加到容器中。
完整的代码示例:
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 500 500");
const container = document.getElementById("container");
container.appendChild(svg);
上述代码创建了一个宽度和高度为500的SVG元素,并将其添加到id为"container"的容器元素中。你可以根据实际需求修改viewBox的值和容器元素的id。
领取专属 10元无门槛券
手把手带您无忧上云