Question

这可能只是我正在犯的一些愚蠢的错误，但我无法确定问题的原因。我正在创建一个包含SVG元素的Polymer元素。我已经尝试了几种方法来设置svg元素的宽度和高度，但我的所有努力似乎都被从结果页面中剥离了。我在Chrome和Firefox的最新版本中检查了结果，但是在每个版本中都没有留下任何宽度或高度属性，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声明中使用这些属性。这是无效的，不起作用。（编辑：已经进行了快速谷歌搜索，这似乎有可能在某一时刻，我已经被删除了。希望其他人可以清除这一点）。其次，要绑定到属性，您需要使用$=语法

请参阅here

有一些非常常见的原生元素属性，也可以作为属性进行修改。由于跨浏览器的限制，能够在某些属性值中放置绑定括号{{...}}，以及其中一些属性映射到不同命名的JavaScript属性，因此建议始终使用将动态值绑定到这些特定属性时的属性绑定（使用$ =），而不是绑定到它们的属性名称。

所以你的元素应该是这样的（注意$=和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的宽度和高度

1 个答案: