给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不够了解。

- Mayo

---

不确定问题出在哪里。这个链接可以正常运行：http://jsfiddle.net/vry4e8w2/2/我有一种感觉相关的代码可能有问题，但是 SVG 不一定是罪魁祸首。如果没有看到您完整的代码，无法断言。 - Devin Fields

Answer 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>

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

- Jonathan Eunice

---

谢谢，我会再看一下SVG文件。 - Mayo

这个答案可以通过提及CSS优先级来改进。 - Sean

Answer 2

以下是正确运行的内容：

<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"，其中包含一个 fill:#FFFFFF，因此您可能需要更改或删除 st0 类。

作为测试，您可以添加 .st0:hover{fill:red;} ，这将在鼠标移动到上面时突出显示该县：

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

- Danny_ds

Answer 3

您需要将样式应用于<path>标签中包含的图标：style="stroke:var(--button-bg-color)"

<svg width="32" height="62" viewBox="0 0 32 62" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 37L31 31C31 31 27.3431 27.3431 25 25" style="stroke:var(--button-bg-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31 61C14.4315 61 1 47.5685 1 31C1 14.4315 14.4315 1 31 1" stroke="#C4C4C4"/>
  </svg>

- Евгений Горелов

---

我需要将样式应用于包含在<path>标签中的图标：style="stroke:var(--button-bg-color)"。 - Евгений Горелов

你好，Евгений Горелов。请删除您在此页面上的所有其他帖子和评论，并将此帖子[编辑]为根据[答案]的答案 - 或者如果您实际上无法回答此页面顶部的问题，则也可以将其删除。 - Yunnosch