这可能只是我正在犯的一些愚蠢的错误,但我无法确定问题的原因.我正在创建一个包含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"
}
}
您不能在css声明中使用这些属性.这是无效的,不起作用.(编辑:做了一个快速谷歌搜索,这似乎有可能在一个点,我现在已被删除.希望其他人可能能够清除这一点).其次,要绑定到属性,您需要使用$=语法
看到这里
有一些非常常见的本机元素属性,也可以修改为属性.由于跨浏览器的限制,能够在某些属性值中放置绑定括号{{...}},以及其中一些属性映射到不同命名的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>