时间戳

首页 > 解决方案 > 如何从模板中添加 SVG g 元素？

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

问题描述

我正在尝试使用 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 元素？

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

任何指针将不胜感激;-)

标签： javascripthtmltemplatessvg

解决方案

如果您将元素放入 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>

推荐阅读