在 Polymer 元素中设置 svg 的宽度和高度

Question

这可能只是我犯的一些愚蠢错误，但我无法确定问题的原因。我正在创建一个包含 SVG 元素的 Polymer 元素。我已经尝试了几种方法来设置 svg 元素的宽度和高度，但我所有的努力似乎都从生成的页面中消失了。我在 Chrome 和 Firefox 的最新版本中检查了结果，但是在它们每个中都保留了 none 的宽度或高度属性，并且 CSS 属性似乎已经消失。 svg 在这两种情况下都是 300 像素宽和 150 像素高。

这是svg-test.html:

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

<dom-module id="svg-test">

  <style>
    svg {
      width: {{width}};
      height: {{height}};
    }
  </style>

  <template>
    <svg width="{{width}}" height="{{height}}"></svg>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'svg-test',

    properties: {
      width: {
        type: Number,
        value: 200
      },
      height: {
        type: Number,
        value: 200
      }
    }

  });

</script>

这是一个测试页：

<!doctype html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="svg-test.html">

</head>
<body>

  <svg-test></svg-test>
  <svg-test width="300" height="15"></svg-test>

</body>
</html>

这是bower.json:

{
  "name": "svg-test",
  "main": "svg-test.html",
  "dependencies": {
    "polymer": "Polymer/polymer#^1.0.0"
  }
}

Answer 1

您不能在 css 声明中使用属性。这是无效的，不会起作用。（编辑：进行了快速 google 搜索后，这似乎在某一时刻是可行的，但我现在已被删除。希望其他人可以清除此问题向上）。其次，要绑定到属性，您需要使用 $= 语法

见here

There are a handful of extremely common native element attributes which can also be modified as properties. Due to cross-browser limitations with the ability to place binding braces {{...}} in some of these attribute values, as well as the fact that some of these attributes map to differently named JavaScript properties, it is recommended to always use attribute binding (using $=) when binding dynamic values to these specific attributes, rather than binding to their property names.

所以您的元素应该看起来像（注意 width 和 height 属性上的 $=：

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

<dom-module id="svg-test">
  <style>
    // no style
  </style>
  <template>
    <svg width$="{{width}}" height$="{{height}}"></svg>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'svg-test',
    properties: {
      width: {
        type: Number,
        value: 200
      },
      height: {
        type: Number,
        value: 200
      }
    }
  });
</script>

在 Polymer 元素中设置 svg 的宽度和高度

Setting width and height of svg in Polymer element

svg

polymer