Creating SVG markers programmatically with Javascript_问答_开发者

Creating SVG markers programmatically with Javascript

开发者 https://www.devze.com 2023-01-07 21:10 出处：网络

Is it possible to create a marker in SVG using Javascript and then apply it to a newly created line? If so, please can you tell me what is wrong with the code below. I would expect the red and green lines to both have an arrow head but in both Chrome and Firefox 3.6 only the green line does.

<?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'开发者_如何学Go, '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>

It worked fine if I changed some parts of your code like this:

var newmarker = oldmarker.cloneNode(true);
newmarker.setAttribute("id", "Triangle");

...which suggests that the error lies in the code that creates the marker element.

Creating SVG markers programmatically with Javascript

精彩评论

关注公众号

热门标签

图文推荐

Creating SVG markers programmatically with Javascript

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：