向SVG添加类

时间:2018-07-03 22:32:55

标签: css svg

我抓取了一个SVG文件a map of NY State,并想向各种元素(县)添加类。

我尝试通过javascript添加一个类。该类已添加,但在视觉上没有任何反应。我尝试直接插入该类。那没用。我尝试在现有ID上添加填充,但这没做任何事情。

现有代码如下:

<polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633 

如前所述,我尝试添加一个类,将填充信息添加到现有ID(St_Lawrence)中,但这没有用。但是,添加样式内联有效(请参见下文)

<polygon id="St_Lawrence" style="fill:#FF0000;" points="404.480957,7.098633 

不幸的是,那并没有真正的帮助。

基本代码如下:

<svg xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
     style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">

<g id="Layer_1">
            <g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
                <polygon id="St_Lawrence" points="404.480957,7.098633 404.581543,7.098633 404.581543,7.098633 
                    406.171387,7.099609 406.171387,7.099609 406.218262,7.109375 406.218262,7.109375 406.313965,7.109375 408.001465,7.123047 
                    408.001465,7.123047 408.050293,7.123047 408.050293,7.123047 410.122559,7.138672 410.591309,11.53125 410.591309,11.53125 

编辑:

我处理了另一个SVG文件,并使类按需工作。对SVG不够了解,无法解释为什么它会起作用而第一个不起作用。

2 个答案:

答案 0 :(得分:1)

在以下情况下可以正常工作:

<style type="text/css">
<![CDATA[
    .st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
    .st1{fill:none;stroke:#000044;stroke-width:0.5;}
    .highlight{fill:#00ff00;stroke:#000044;stroke-width:0.5;}
]]>
</style>

<g fill="#FFFFFF" stroke="#000000" stroke-width="0.25">
    <polygon id="St_Lawrence" class="highlight" points="404.480957,7.098633 

但是,<polygon>已经具有一个class="st0"的{​​{1}},因此您可能想要更改或删除fill:#FFFFFF类。

作为测试,您只需添加st0,当鼠标移到该县时,它将突出显示该县:

.st0:hover{fill:red;}

答案 1 :(得分:1)

您可以在SVG中使用CSS样式(无论基于类,id或其他CSS选择器)。混合内联属性(例如单个fill="blue"style属性(例如style="fill: blue;")和样式表有点棘手,因为SVG不会按优先级顺序解释它们您可能会期望(或者至少会期望)。

在上面的地图中,基于id的选择器可能会更方便,因为各县都以id命名。

下面是一个通过id进行CSS样式设置的示例:

<svg  xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
 width="633.475098" height="475.573242" viewBox="0 0 633.475098 475.573242"
 style="overflow:visible;enable-background:new 0 0 633.475098 475.573242" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .st0{fill:#FFFFFF;stroke:#000000;stroke-width:0.25;}
    .st1{fill:none;stroke:#000044;stroke-width:0.5;}
    #St_Lawrence {
        fill: blue; fill-opacity: 0.3;
    }
    #Queens { 
        fill: orange; fill-opacity: 0.9;
    }

]]>
</style>

(文档的其余部分相同)

这将用填充颜色突出显示两个县:

example