更改 SVG 的 css 没有做任何事情答案

【问题标题】：changing css of SVG not doing anything更改 SVG 的 css 没有做任何事情
【发布时间】：2014-09-04 06:44:31
【问题描述】：

所以我有两个“内联”svg，一个用于男性，另一个用于女性。我已将它们嵌入到 HTML bu including php 文件中。我有两个按钮“男性”和“女性”，每个按钮在点击时显示各自的 SVG。默认情况下，可见的 SVG 是男性，单击女性按钮时，它会将男性的 css 属性 visibility 更改为隐藏，将女性更改为可见，反之亦然。

但是女性<path id="base"/> 的填充颜色在按钮单击时不会改变，但是男性<path id="base"/> 的填充颜色会完全改变。尴尬的是两者都具有相同的id="base"，并且通过更改颜色我正在更改 ID 的颜色。

两个文件的示例 SVG 代码

<path id="base" d="M105.321,475.585c0..."/>
<path id="collor" d="M207.452,17.68c..."/>

其他 SVG 也有 ID 为“base”和“color”的路径，但它们不会改变。

这就是我改变颜色的方式

$('#whiteB').click(function(){
        $('#base').css('fill', 'white');
        $('#collor').css('fill', 'yellow'); 
    });

我知道这与我正在更改可见性或其他任何事情有关，但它很尴尬，所以请帮帮我。

【问题讨论】：

男性使用base_m，女性使用base_f。选择器仅在第一次出现 id 时起作用。

标签： javascript jquery html css svg

【解决方案1】：

具有相同 ID 的两个 XML 项是无效的。您将无法使用重复 ID 定位第二个实例。 ID 应该是唯一的。如果您希望元素之间的属性相同，则可以使用类。在不知道其余代码的情况下，您可以执行以下操作：

<path class="base" d="M105.321,475.585c0..."/>
<path class="collor" d="M207.452,17.68c..."/>

JS：

$('.genderButton').click(function(){
    $(this).find('.base').css('fill', 'white');
    $(this).find('.collor').css('fill', 'yellow'); 
});

假设genderButton 是您单击的按钮的类。

【讨论】：

哇，我真笨。我的目标是ID。谢谢

【解决方案2】：

因为您两次使用相同的 ID，jquery 只会在文档中找到第一个匹配项。

正如其他人所说，您应该真正使用类或唯一 ID，但这并不总是可行的。尤其是当 SVG 非常复杂或从外部源嵌入时。

如果由于某种原因无法更改 ID，则可以通过将选择器的范围限制为父元素来将 JQuery 指向正确的方向。

在您的情况下，您可以为每个 SVG 标记或父元素指定一个唯一 ID，并使用该 ID 来限制您的 JQuery 选择器的范围。

你的标记会变成这样：

<svg id="male">
    <path id="base" />
</svg>

<svg id="female">
    <path id="base" />
</svg>

您以女性 svg 为目标的 JQuery 将变为：

$('#whiteB').click(function(){
    $('#female #base').css('fill', 'white');
    $('#collor').css('fill', 'yellow'); 
});

Here is a demo of the concept working

【讨论】：