Добавление элементов в SVG в полимерном элементе

Ниже вы видите небольшой тестовый элемент. Он создает SVG, и всякий раз, когда вы нажимаете SVG, он должен добавить круг. Проверка элемента показывает, что круги действительно добавлены (я знаю, что позиция не совсем правильная), но они не показаны.Добавление элементов в SVG в полимерном элементе

Это svg-test.html

<link rel="import" href="../polymer/polymer.html"> 

<dom-module name="svg-test"> 
    <link rel="import" type="css" href="svg-test.css"> 
    <template> 
    <svg id="test" width$="{{width}}" height$="{{height}}" xmlns="http://www.w3.org/2000/svg"></svg> 
    </template> 
    <script> 
    Polymer({ 
     is: 'svg-test', 

     properties: { 
     width: { 
     type: String, 
     value: "200" 
     }, 
     height: { 
     type: String, 
     value: "200" 
     } 
    }, 

    listeners: { 
     'test.tap': 'addCircle' 
    }, 

    addCircle: function(e) { 
     var uri = 'http://www.w3.org/2000/svg'; 
     var svg = this.$$('svg'); 
     var circle = document.createElementNS(uri,'circle'); 
     circle.setAttributeNS(uri, 'r', '5'); 
     circle.setAttributeNS(uri, 'cx', e.detail.x); 
     circle.setAttributeNS(uri, 'cy', e.detail.y); 
     circle.setAttributeNS(uri, 'fill', 'white'); 
     circle.setAttributeNS(uri, 'stroke', 'black'); 
     circle.setAttributeNS(uri, 'stroke-width', '2'); 
     svg.appendChild(circle); 
    } 
    }); 
    </script> 
</dom-module>

Это тестовая страница:

<!DOCTYPE html> 

<html> 
<head> 
    <title>svg-test Demo</title> 

    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> 

    <link rel="import" href="svg-test.html"> 
</head> 

<body unresolved> 
    <p>An example of svg-test looks like this:</p> 

    <svg-test></svg-test> 
</body> 
</html>

И это bower.json:

{ 
    "name": "svg-test", 
    "dependencies": { 
    "polymer": "Polymer/polymer#^1.1.2" 
    } 
}

источник

2016-05-22 nvcleemp

Что не работает должным образом? –

Как я уже сказал во введении: круги добавляются в SVG, но они не видны. Я ожидаю, что они будут видны. Я проверил это в последних версиях Firefox и Chrome. – nvcleemp

Хотя SVG элементы находятся в пространстве имен SVG, атрибуты обычно в нулевом пространстве имен, поэтому вы хотите это ...

var circle = document.createElementNS(uri,'circle'); 
    circle.setAttribute('r', '5'); 
    circle.setAttribute('cx', e.detail.x); 
    circle.setAttribute('cy', e.detail.y); 
    circle.setAttribute('fill', 'white'); 
    circle.setAttribute('stroke', 'black'); 
    circle.setAttribute('stroke-width', '2');

источник

2016-05-22 12:59:46

Спасибо, это действительно решает проблему. Возможно, у вас есть идея, как я могу получить правильное положение для кругов? Мне нужно получить смещение элемента SVG. В более ранней версии я использовал 'svg.offsetLeft' и' svg.offsetTop', но они больше не работают (они не определены). – nvcleemp

[getBoundingClientRect] (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) –

Добавление элементов в SVG в полимерном элементе

ответ

Смежные вопросы