堆栈内存溢出
  简体   繁体   English

在 HTML 中使用 javascript 动态创建 SVG 元素

[英]Creating SVG elements dynamically with javascript inside HTML

 原文  2013-12-12 09:08:55  7   5    javascript/ html/ svg

问题描述

I want to create a rectangle inside an HTML page, then write some text on that rectangle.我想在 HTML 页面内创建一个矩形，然后在该矩形上写一些文本。 I also need that text to be a hyperlink.我还需要该文本成为超链接。 This is what I did but it is not working:这就是我所做的，但它不起作用：

    <!DOCTYPE html>
<html>
<body>

<script>

    var svg   = document.documentElement;
    var svgNS = svg.namespaceURI;

    var rect = document.createElementNS(svgNS,'rect');
    rect.setAttribute('x',5);
    rect.setAttribute('y',5);
    rect.setAttribute('width',500);
    rect.setAttribute('height',500);
    rect.setAttribute('fill','#95B3D7');
    svg.appendChild(rect);
    document.body.appendChild(svg);

    var h=document.createElement('a');
    var t=document.createTextNode('Hello World');
    h.appendChild(t);
    document.body.appendChild(h);


</script>

</body>
</html>

Can you help please?你能帮忙吗？ Thanks.谢谢。

5 个解决方案

解决方案1
 118  2013-12-12 09:15:22

Change改变

var svg   = document.documentElement;

to到

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

so that you create a SVG element.这样您就可以创建一个SVG元素。

For the link to be an hyperlink, simply add a href attribute :要使链接成为超链接，只需添加一个href属性：

h.setAttributeNS(null, 'href', 'http://www.google.com');

Demonstration示范

解决方案2
 43  2016-05-24 11:05:05

To facilitate svg editing you can use an intermediate function:为了方便 svg 编辑，您可以使用中间函数：

function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v)
    n.setAttributeNS(null, p, v[p]);
  return n
}

Now you can write:现在你可以写：

svg.appendChild( getNode('rect', { width:200, height:20, fill:'#ff0000' }) );

Example (with an improved getNode function allowing camelcase for property with dash, eg strokeWidth > stroke-width):示例（具有改进的 getNode 函数，允许带有破折号的属性使用驼峰命名，例如strokeWidth > stroke-width）： 

 function getNode(n, v) { n = document.createElementNS("http://www.w3.org/2000/svg", n); for (var p in v) n.setAttributeNS(null, p.replace(/[AZ]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]); return n } var svg = getNode("svg"); document.body.appendChild(svg); var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' }); svg.appendChild(r); var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 }); svg.appendChild(r);

解决方案3
 37  2014-03-21 09:49:16

Add this to html:将此添加到 html：

<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"/>

Try this function and adapt for you program:试试这个功能并适应你的程序：

var svgNS = "http://www.w3.org/2000/svg";  

function createCircle()
{
    var myCircle = document.createElementNS(svgNS,"circle"); //to create a circle. for rectangle use "rectangle"
    myCircle.setAttributeNS(null,"id","mycircle");
    myCircle.setAttributeNS(null,"cx",100);
    myCircle.setAttributeNS(null,"cy",100);
    myCircle.setAttributeNS(null,"r",50);
    myCircle.setAttributeNS(null,"fill","black");
    myCircle.setAttributeNS(null,"stroke","none");

    document.getElementById("mySVG").appendChild(myCircle);
}

解决方案4
 0  2021-06-16 14:05:49

 function getNode(n, v) { n = document.createElementNS("http://www.w3.org/2000/svg", n); for (var p in v) n.setAttributeNS(null, p.replace(/[AZ]/g, function(m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]); return n } var svg = getNode("svg"); document.body.appendChild(svg); var r = getNode('rect', { x: 10, y: 10, width: 100, height: 20, fill:'#ff00ff' }); svg.appendChild(r); var r = getNode('rect', { x: 20, y: 40, width: 100, height: 40, rx: 8, ry: 8, fill: 'pink', stroke:'purple', strokeWidth:7 }); svg.appendChild(r);

解决方案5
 0  2022-09-07 07:56:50

Elements can easily be added using the fragment.可以使用片段轻松添加元素。

Example例子

 <input style="width:300px" type="text" placeholder="Input something to change the text." /><br> <script> const frag = document.createRange().createContextualFragment(` <svg width="250" height="250"> <rect x="0" y="0" width="250" height="250" fill="#95B3D7"></rect> <a href="https://www.google.com" style="cursor: pointer" target="_blank"> <text x="10" y="130" style=" font-size: 48px; fill:#faff00;"> Hello world</text> </a> </svg> `) const textElem = frag.querySelector("text") document.querySelector("input").onchange = (e) => { textElem.textContent = e.target.value } document.body.append(frag) </script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 动态创建SVG元素 - Creating SVG elements dynamically 使用 Javascript 动态创建 HTML 元素？ - Dynamically creating HTML elements using Javascript? Javascript帮助动态创建html元素并将该元素填充到DOM - Javascript help on dynamically creating html elements and populating the element onto the DOM 使用HTML / Javascript访问动态创建的div中的元素 - Accessing elements inside dynamically created divs with HTML/Javascript 在具有特定 ID 的 DIV 中使用 JavaScript 动态添加 HTML 元素 - Add HTML elements dynamically with JavaScript inside DIV with specific ID 在javascript中动态创建和删除元素 - Dynamically Creating and Removing Elements in javascript 如何使用JavaScript动态生成id并将其赋予html SVG中的特定元素？ - How to dynamically generate id and give it to particular elements in html SVG using javascript? 使用Javascript动态创建html表 - Dynamically creating an html table with Javascript 使用 JavaScript 将 SVG 文档动态插入 HTML 中？ - Insert SVG document into HTML dynamically using JavaScript? 创建用于JavaScript测试的HTML元素 - Creating HTML elements for javascript testing
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM