如何操作SVG元素

时间:2018-04-10 19:37:35

标签: html sass chart.js chartist.js

刚刚发现我想要改变的东西叫做SVG元素。希望这有助于澄清问题。

我的应用程序上有一个条形图,我想更改图表中条形图的Sass。检查浏览器中的HTML,我可以看到您可以通过更改下面的x和y值来进行这些调整。我在哪里/如何在实际代码中更改这些值以反映我的应用程序中的更改?我试图在线查找问题但不确定如何解决问题。

<svg>
<g class="ct-series ct-series-a">
    <line 
    x1="197.5" 
    x2="197.5" 
    y1="45" 
    y2="5" 
    class="ct-bar" 
    ct:value="1" 
    style="stroke: orange">

    </line>
</g>
</svg>

我已经检查了我的HTML,SCSS和TS页面,但我找不到任何看似可以操作的元素。我已将所有scss引用附加到下面的图表图表中。非常感谢帮助。

.ct-chart {
    .ct-series-a .ct-line {
        stroke: #253B56;
        stroke-width: 1px;
    }

    .ct-series-a .ct-point {
        stroke: darkblue;
        stroke-width: 5px;
    }

    .ct-series-a .ct-bar {
        stroke: gray;
        stroke-width: 34px;
        stroke-linecap: square;

    }

    .ct-series-b .ct-bar {
        stroke: gray;
        stroke-width: 30px;
        stroke-linecap: square;
    }

    .ct-series-c .ct-bar {
        stroke: white;
        stroke-width: 30px;
        stroke-linecap: square;
    }
}

最后

new Chartist.Bar(ident, data2, options2)
              .on('draw', function(data) {
                for(var index in data.series){
                  if(data.series[index] == 1 && data.index == index){
                    data.element.attr({
                      style: 'stroke: orange'
                      // line x1="162.5", 
                      // x2="162.5", 
                      // y1="15", 
                      // y2="5,"
                    });
                  }
                }
              });
          }

0 个答案:

没有答案