Fatal编程技术网
  • javascript/
  • 使用Javascript以编程方式创建SVG标记

使用Javascript以编程方式创建SVG标记

javascript svg

使用Javascript以编程方式创建SVG标记,javascript,svg,marker,Javascript,Svg,Marker,是否可以使用Javascript在SVG中创建一个标记，然后将其应用于新创建的行？如果是这样，请告诉我下面的代码有什么问题。我希望红线和绿线都有箭头，但在Chrome和Firefox3.6中只有绿线有箭头 <?php header('Content-type: application/xhtml+xml'); echo '<?xml version="1.0" encoding="utf-8" ?>'; ?> <!DOCTYPE html PUBLIC "-//

是否可以使用Javascript在SVG中创建一个标记，然后将其应用于新创建的行？如果是这样，请告诉我下面的代码有什么问题。我希望红线和绿线都有箭头，但在Chrome和Firefox3.6中只有绿线有箭头

<?php

header('Content-type: application/xhtml+xml');
echo '<?xml version="1.0" encoding="utf-8" ?>';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>SVG test</title>
<script type="text/javascript">
function init()
{
    var div = document.getElementById('mainDiv');

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

    svgNode.style.width = "200px";
    svgNode.style.height = "200px";
    svgNode.style.overflow = 'visible';
    svgNode.style.position = 'absolute';
    svgNode.setAttribute('version', '1.1');
    svgNode.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    div.appendChild(svgNode);

    var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
    marker.setAttribute('id', 'Triangle');
    marker.setAttribute('viewBox', '0 0 10 10');
    marker.setAttribute('refX', '0');
    marker.setAttribute('refY', '5');
    marker.setAttribute('markerUnits', 'strokeWidth');
    marker.setAttribute('markerWidth', '4');
    marker.setAttribute('markerHeight', '3');
    marker.setAttribute('orient', 'auto');
    var path = document.createElementNS('http;//www.w3.org/2000/svg', 'path');
    marker.appendChild(path);
    path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');

    svgNode.appendChild(defs);
    defs.appendChild(marker);

    var obj = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    obj.setAttribute('x1', 50);
    obj.setAttribute('y1', 50);
    obj.setAttribute('x2', 50);
    obj.setAttribute('y2', 150);
    obj.setAttribute('stroke', '#ff0000');
    obj.setAttribute('stroke-width', 7);
    obj.setAttribute('marker-end', 'url(#Triangle)');

    svgNode.appendChild(obj);


}
</script>
</head>

<body onload="init();">
<div id="mainDiv" style="width: 100%; height: 100%; visibility: visible; overflow: visible; position: absolute; background: white;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="width: 200px; height: 200px; position: absolute;">
        <defs>
            <marker id="Triangle-static" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
                <path d="M 0 0 L 10 5 L 0 10 z"></path>
            </marker>
        </defs>
        <line x1="150" y1="50" x2="150" y2="150" stroke="#00ff00" stroke-width="7" marker-end="url(#Triangle-static)" />
    </svg>
</div>
</body>

</html>


SVG测试
函数init（）
{
var div=document.getElementById（'mainDiv'）；
var svgNode=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
svgNode.style.width=“200px”；
svgNode.style.height=“200px”；
svgNode.style.overflow='visible'；
svgNode.style.position='absolute'；
setAttribute（'version'，'1.1'）；
setAttribute（'xmlns'，'http://www.w3.org/2000/svg');
儿童分部（svgNode）；
var defs=document.createElements（'http://www.w3.org/2000/svg","defs",；
var marker=document.createElements（'http://www.w3.org/2000/svg","标记",；
setAttribute（'id'，'Triangle'）；
marker.setAttribute（'viewBox'，'01010'）；
marker.setAttribute（'refX'，'0'）；
marker.setAttribute（'refY'，'5'）；
setAttribute（'markerUnits'，'strokeWidth'）；
setAttribute（'markerWidth'，'4'）；
marker.setAttribute（'markerHeight'，'3'）；
setAttribute（'orient'，'auto'）；
var path=document.createElements（'http；//www.w3.org/2000/svg'，'path'）；
marker.appendChild（路径）；
setAttribute（'d'，'m0'l10'5l0'10z'）；
附加子对象（defs）；
定义追加子项（标记）；
var obj=document.createElements（'http://www.w3.org/2000/svg","行",；
对象设置属性（'x1'，50）；
对象设置属性（'y1'，50）；
对象集合属性（'x2'，50）；
对象设置属性（'y2'，150）；
obj.setAttribute（'stroke'，'#ff0000'）；
obj.setAttribute（'stroke-width'，7）；
obj.setAttribute（'marker-end'，'url（#Triangle'）；
附肢儿童（obj）；
}
如果我像这样更改代码的某些部分，效果会很好：

var newmarker = oldmarker.cloneNode(true);
newmarker.setAttribute("id", "Triangle");
…这表明错误存在于创建标记元素的代码中。

好吧，我现在觉得自己很愚蠢-原来问题是打字错误。如果查看以下行：var path=document.createElements（'http；//www.w3.org/2000/svg'，'path'）；您将看到http；//而不是http://。哎呀！！谢谢你给我指明了正确的方向。