Question

下面你会看到一个小测试元素。它创建一个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"
  }
}

Answer 1

虽然SVG元素位于SVG名称空间中，但属性通常位于null名称空间中，因此您需要这个...

  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');

在Polymer元素中向SVG添加元素

1 个答案: