Получить доступ к атрибутам svg

75
03 июля 2021, 21:30

Есть svg

 <?xml version="1.0" encoding="UTF-8"?>
    <svg id="div1" width="78.153" height="80.535" version="1.1" viewBox="0 0 20.678 21.308" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
     <metadata>
      <rdf:RDF>
       <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
       </cc:Work>
      </rdf:RDF>
     </metadata>
     <g id="main_layer" transform="translate(-13.526 -44.229)">
      <g id="main_layer_1" fill="#fff" fill-rule="evenodd" stroke="#007500" stroke-width="1.5875">
       <rect class="rect1" x="15.899" y="47.219" width="15.95" height="15.95"/>
       <path d="m15.106 54.907h3.7042"/>
       <path d="m28.943 54.907h3.7042"/>
      </g>
      <g fill="none">
       <path id="opened" d="m19.841 54.907h7.9428" stroke="#007500" stroke-width="1.5875"/>
       <path id="closed" d="m23.812 50.673v8.4666" stroke="#007500" stroke-width="1.5875" visible="false"/>
       <rect id="selection" x="14.314" y="45.643" width="19.102" height="19.106" stroke="#329081" stroke-width="1.5764"/>
      </g>
      <g id="locker" transform="matrix(.012499 0 0 .012499 25.684 44.229)">
       <path id="locker_path" d="m292.68 0c-94.389 0-171.18 76.791-171.18 171.18v97.767c0 1.111-1.371 2.983-2.448 3.341-9.257 3.087-16.775 5.762-23.657 8.415-8.207 3.164-14.397 12.259-14.397 21.157v224.64c0 8.837 6.15 17.94 14.305 21.172 63.097 25.003 129.5 37.678 197.38 37.678s134.28-12.678 197.38-37.681c8.152-3.231 14.299-12.332 14.299-21.169v-224.64c0-8.898-6.189-17.993-14.4-21.16-6.885-2.653-14.402-5.328-23.652-8.415-1.074-0.358-2.445-2.231-2.445-3.342v-97.766c-5e-3 -94.389-76.794-171.18-171.18-171.18zm-46.626 370.28c0-25.769 20.875-46.622 46.623-46.622 25.746 0 46.621 20.851 46.621 46.622 0 17.075-9.629 31.371-23.311 39.475v77.081c0 12.886-10.426 23.311-23.311 23.311-12.886 0-23.311-10.425-23.311-23.311v-77.081c-13.681-8.104-23.311-22.4-23.311-39.475zm158.95-199.1v84.355c-36.834-7.926-74.623-11.94-112.31-11.943-37.666 0-75.447 4.015-112.34 11.934v-84.346c0-61.935 50.386-112.32 112.32-112.32 61.933-1e-3 112.32 50.385 112.32 112.32z"/>
      </g>
     </g>
    </svg>

Стоит задача сгенерировать объект на javascript. Создаю

var mysvg;
mysvg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
            mysvg.setAttribute('width','78.153');
            mysvg.setAttribute('height','80.535');
            mysvg.setAttribute('attr', result[i].graph_node_id);
            mysvg.setAttribute('viewBox','0 0 20.678 21.308');

// Создаём элемент rect

var newElement;
newElement = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
newElement.setAttribute('x', 15.899);
newElement.setAttribute('y', 47.219);
// newElement.setAttribute('width','15.95');
// newElement.setAttribute('height','15.95');
newElement.setAttribute('x', 15.899);
newElement.setAttribute('y', 47.219);
newElement.setAttribute('fill','#fff');
newElement.setAttribute('stroke','#000');
newElement.setAttribute('stroke-width','1');
newElement.setAttribute('rx','1');

// Помещаем rect в наш svg

mysvg.appendChild(newElement);

Ничего не выходит, я понимаю. что не все элементы задействовал, но не получается сгенерить даже усеченную версию.

READ ALSO
написать в разных файлах js/html fancybox

написать в разных файлах js/html fancybox

Доброго времени сутокИмеется код например такой

71
Создать копию массива объектов с изменением названия поля

Создать копию массива объектов с изменением названия поля

Получаю с сервера массив объектов tempArrayПодскажите, как создать копию этого массива и переименовать поле name на title

94
Не работает свойство justify-content: space-between; [закрыт]

Не работает свойство justify-content: space-between; [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

118