Настройка ширины и высоты svg в элементе полимера

Это, вероятно, просто какая-то глупая ошибка, которую я делаю, но я не могу определить причину проблемы. Я создаю элемент Polymer, содержащий элемент SVG. Я пробовал несколько способов установить ширину и высоту элемента svg, но все мои усилия, похоже, удаляются с результирующей страницы. Я проверил результат в последней версии Chrome и Firefox, но в каждом из них ни один из атрибутов ширины и высоты не оставлен, и свойства CSS, похоже, исчезли. Svg имеет в обоих случаях 300 пикселей в ширину и 150 пикселей в высоту.Настройка ширины и высоты svg в элементе полимера

Это 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" 
    } 
}

источник

2015-06-12 nvcleemp

Вы не можете использовать свойства в вашем CSS декларация. Это неверно и не будет работать. (Редактировать: сделав быстрый поиск в Google, это, кажется, было возможно в какой-то момент, и теперь я был удален. Надеюсь, кто-то еще сможет это прояснить). Во-вторых, привязать к атрибуту, вы должны использовать синтаксис $=

См 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>

источник

2015-06-12 08:39:50

Это кажется я в основном смотрел на 0,5 примеров полимеров, и я не обходили связывания данных Спасибо, это работает сейчас. – nvcleemp

Настройка ширины и высоты svg в элементе полимера

ответ

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