如何更改SVG样式?

时间:2014-09-11 16:59:56

标签: javascript html svg highcharts

当我过滤我的图表时会发生以下情况:

这是正常的:

NORMAL

以下是我过滤时会发生的事情:

filtered

我在PHP / HTML,JS或CSS文件中找不到任何内容。所以我认为这是默认的Highcharts样式。

当我检查元素时,我在过滤数据时得到以下内容:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1178" height="767">

    <desc></desc>
    <defs></defs>
    <rect rx="5" ry="5" fill="transparent" x="0" y="0" width="1178" height="767"></rect>
    <image preserveAspectRatio="none" x="230" y="20" width="720" height="720" href="http://ati.publishwhatyoufund.org/wp-content/themes/ati/img/new_bg.png"></image>
    <g class="highcharts-grid" zIndex="1"></g>
    <g class="highcharts-grid" zIndex="1"></g>
    <g class="highcharts-axis" zIndex="2"></g>
    <g class="highcharts-axis" zIndex="2"></g>
    <g class="highcharts-series-group" zIndex="3">
        <g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(10,10) scale(1 1)" style="cursor:pointer;" clip-path="url(#highcharts-1)">
            <circle cx="579" cy="374.7774545454546" r="350" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="380.2412727272727" r="344.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="392.95645454545456" r="331.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="393.3274545454546" r="331" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="425.60445454545453" r="298" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="436.2622727272727" r="287" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="459.70272727272726" r="263" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="463.48018181818185" r="259" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="470.90018181818186" r="251.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="480.14145454545456" r="242" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="481.92900000000003" r="240.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="491.60872727272726" r="230.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="498.79263636363635" r="223" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="502.06418181818185" r="219.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="503.54818181818183" r="218" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="508.0339090909091" r="213.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="512.3847272727273" r="209" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="513.464" r="208" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="514.7793636363637" r="206.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="519.7372727272727" r="201.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="525.099909090909" r="196" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="525.1673636363637" r="196" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="527.1235454545455" r="194" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="529.1134545454546" r="192" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="533.869" r="187" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="557.5792727272727" r="162.5" stroke="white" stroke-width="1" fill="transparent"></circle>
            <circle cx="579" cy="560.952" r="159" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="567.1915454545455" r="153" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="572.9251818181818" r="147" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="580.3114545454546" r="139.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="583.6841818181819" r="136" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="584.6622727272727" r="135" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="584.696" r="135" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="591.9136363636363" r="127.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="592.2171818181819" r="127" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="595.0840000000001" r="124" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="595.2526363636364" r="124" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="595.6236363636364" r="123.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="597.0064545454545" r="122" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="599.8732727272727" r="119" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="605.7755454545454" r="113" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="609.7890909090909" r="109" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="613.4316363636364" r="105.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="613.5665454545455" r="105" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="614.5109090909091" r="104" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="615.7588181818182" r="103" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="615.8262727272727" r="103" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="616.6357272727273" r="102" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="619.5362727272727" r="99" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="620.2782727272727" r="98.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="624.6965454545455" r="93.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="629.8568181818182" r="88.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="633.4993636363637" r="84.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="633.9715454545454" r="84" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="634.1401818181819" r="84" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="634.6798181818182" r="83.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="636.265" r="82" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="638.12" r="80" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="640.6832727272728" r="77.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="640.8856363636364" r="77" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="646.8216363636363" r="71" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="652.7913636363636" r="65" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="655.4220909090909" r="62" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="658.6261818181819" r="59" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="661.7965454545455" r="55.5" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="662.3699090909091" r="55" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
            <circle cx="579" cy="667.058" r="50" stroke="#000000" stroke-width="2" fill="rgb(255,255,255)" fill-opacity="0.5"></circle>
        </g>
        <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(10,10) scale(1 1)"></g>
    </g>
    <g class="highcharts-axis-labels" zIndex="7"></g>
    <g class="highcharts-axis-labels" zIndex="7"></g>

</svg>

我想改变: 笔画宽度为1 不透明度为0

换句话说,我只是希望我的圆圈没有背景,有1px实线边框,并且完全透明。

我不能把它放在JSFiddle上。我无法引入所有CSS资产。然而,我已经浏览了CSS,我找不到那种方式,所以我必须假设Highcharts.js或Highcharts-more.js正在做这种造型。

我在哪里以及如何更改此样式。请,任何帮助表示赞赏。

您可以在此处查看我的CSS,JS和PHP文件:

https://drive.google.com/folderview?id=0B15Cbp9mkdVYNDJ3SXNpYkprLWc&usp=sharing

非常感谢任何帮助。

0 个答案:

没有答案
相关问题