在 Polymer 中设置动态生成的 SVG 样式

Question

我正在尝试将 Javascript 图表库 Chartist 包装在 Polymer 元素中。除了样式之外，一切都按预期工作。图表看起来没有样式（就像每个图表示例在没有加载 css 时所做的那样）。

我创建了一个 样式模块 ，如 https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules 中所述，将其包含在我的元素中，同时包含 link[rel=import] 和样式标签和 copied/pasted chartist.css 的所有内容到样式模块中。不适用于 Firefox/Chrome。

为了证明样式模块已被加载和处理，我包含了一个 ul#message 标签并使用指令对其进行了样式化。很有魅力。

我想问题出在图表师创建 SVG 图表。有谁知道如何处理 SVG 样式或可以指出方向吗？

到目前为止，这是我的代码：

样式模块：

<dom-module id="chartist-styles">
  <template>
    <style>
      :host { display: inline-block; }
      #messages { list-style-type: none; }  

      /* All the contents of chartist.css */

    </style>
  </template>
</dom-module>

聚合物元素：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<!-- Includes chartist.js via script tag -->
<link rel="import" href="../chartist-import.html">

<link rel="import" href="../chartist-styles.html">
<dom-module id="test-charts-line">

    <template>

        <style include="chartist-styles"></style>
        <div id="chartist" class="ct-chart"></div>
        <ul id="messages"></ul>

    </template>

    <script>

    (function() {
        'use strict';

        Polymer({

            is: 'test-charts-line',

            properties: {

                chart: {
                    notify: true    
                },

                data: {
                    type: Object,
                    value: function(){
                        return {};
                    }
                },

                options: {
                    type: Object,
                    value: function(){
                        {}
                    }
                }
            },

            observers: [
                'updateChart(data.*, options.*)'
            ],

            updateChart: function(){

                this.chart = null;

                if(this.options == null){
                    this.chart = new Chartist.Line( '#chartist' , this.data );
                } else {
                    this.chart = new Chartist.Line( '#chartist' , this.data, this.options );    
                }

                let child = document.createElement('li');
                child.textContent = 'blub';
                Polymer.dom(this.$.messages).appendChild(child);

            },

            ready: function(){

                // Taken from a getting-started example on
                // https://gionkunz.github.io/chartist-js/examples.html
                this.data = {
                    // A labels array that can contain any sort of values
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
                    // Our series array that contains series objects or
                    // in this case series data arrays
                    series: [
                        [5, 2, 4, 2, 0]
                    ]
                };

                this.options = {
                    width: 300,
                    height: 200
                };

            }
        });
    })();

    </script>
</dom-module>

Answer 1

在 Polymer docs 中找到了我的问题的解决方案：可以通过调用

来应用动态创建的 DOM 节点的样式

ready: function() {
  this.scopeSubtree(this.$.container, true);
}

其中 this.$.container 引用模板中的 DOM 节点，在我上面的示例中它将是 this.$.chartist.

Not for use on Polymer elements. If the subtree that you scope contains any Polymer elements with local DOM, scopeSubtree will cause the descendants' local DOM to be styled incorrectly.

在 Polymer 中设置动态生成的 SVG 样式

Styling dynamically generated SVG in Polymer

javascript

svg

polymer

chartist.js