Question

我正在尝试使用JavaScript将SVG g元素添加到SVG标记。 g元素在模板标记中定义。它位于模板标签中，因为我想多次重复使用它。

<!DOCTYPE html>
<html>
    <head>
        <title>Template Example</title>
        <style media="screen">
            svg {
                margin: auto;
            }
            g {
                stroke:black;
                stroke-width:2px;
                fill:none;
            }
        </style>
    </head>
    <body>
        <template>
            <g>
               <line x1=" 2" y1="2" x2=" 7" y2="7" ></line>
               <line x1="25" y1="2" x2="20" y2="7" ></line>
               <path class="botLeft" d="m 1,26 6,-6" ></path>
               <path class="botRite" d="m 26,26 -6,-6" ></path>
               <rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect>
               <path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path>
            </g>
        </template>

        <svg width="80%" height="80%" ></svg>

        <script type="text/javascript">
            var temp = document.getElementsByTagName("template")[0];
            var clon = temp.content.cloneNode(true);
            var svg = document.getElementsByTagName("svg")[0];
            svg.appendChild(clon);
        </script>
    </body>
</html>

此代码在正确的位置将g元素添加到DOM，但不呈现元素。

在阅读有关SVG的其他帖子后，我认为这是因为这不是普通的HTML元素，而是SVG元素。

如何建议浏览器将其视为SVG元素？

我看到一些暗示命名空间的言论但无法理解需要什么。

任何指针都将受到赞赏; - ）

Answer 1

如果您将元素放在SVG本身并使用<defs>标记而不是<template>标记嵌入它们，则它们都将在正确的命名空间中创建，并且也是不可见的。

<!DOCTYPE html>
<html>
    <head>
        <title>Template Example</title>
        <style media="screen">
            svg {
                margin: auto;
            }
            g {
                stroke:black;
                stroke-width:2px;
                fill:none;
            }
        </style>
    </head>
    <body>
        <svg width="80%" height="80%" >
            <defs>
            <g>
               <line x1=" 2" y1="2" x2=" 7" y2="7" ></line>
               <line x1="25" y1="2" x2="20" y2="7" ></line>
               <path class="botLeft" d="m 1,26 6,-6" ></path>
               <path class="botRite" d="m 26,26 -6,-6" ></path>
               <rect x="1" y="1" rx="3" ry="3" width="25" height="25" ></rect>
               <path class="rectIn" d="m 7,7 0,13 13,0 0,-13 z" style="fill:gray;" ></path>
            </g>
            </defs>        
        </svg>

        <script type="text/javascript">
            var temp = document.getElementsByTagName("g")[0];
            var clon = temp.cloneNode(true);
            var svg = document.getElementsByTagName("svg")[0];
            svg.appendChild(clon);
            var clon2 = temp.cloneNode(true);
            clon2.setAttribute("transform", "translate(50,0)");
            svg.appendChild(clon2);
        </script>
    </body>
</html>

Answer 2

我总是只使用模板的HTML添加到svg。这样就不会出错：https://codepen.io/mrdeadsven/pen/eKvvwV?editors=1010

//This code gets the raw HTML of the template
var temp = d3.select('#d3Template').html();


//Simply adds the raw HTML to the svg element
svg.innerHTML = temp;

如何从模板添加SVG g元素？

2 个答案: