Как добавить элемент SVG g из шаблона? - PullRequest
Новая
       1

Как добавить элемент SVG g из шаблона?

0 голосов
/ 11 июня 2018

Я пытаюсь добавить элемент SVG g в тег SVG, используя JavaScript.Данный элемент определен в теге шаблона.Он находится в теге шаблона, так как я хочу использовать его много раз. 

<!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>

Этот код добавляет данный элемент в DOM в правильном месте, но элемент не отображается.

После прочтения других постов, касающихся SVG, я думаю, что это потому, что это не обычный элемент HTML, а элемент SVG.

Как посоветовать браузеру воспринимать это как элемент SVG?

Я видел некоторые замечания, намекающие на пространства имен, но не могу понять, что нужно.

Любые указатели будут оценены; -)

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Если вы поместите элементы в сам 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>
0 голосов
/ 11 июня 2018

Я всегда просто использую 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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...