向 SVG 添加类

Question

我抓取了一个 SVG 文件、一张纽约州地图，并想向各种元素（县）添加类。

我尝试通过 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 不太了解，无法解释为什么这个可以工作，而第一个却不行。

Answer 1

您可以在 SVG 中使用 CSS 样式（无论是基于类、id 还是其他 CSS 选择器）。fill="blue"混合内联属性（例如 individual ）、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>

（与文档的其余部分相同）

这用填充颜色突出显示了两个县：