Question

所以我有两个'内联'svgs一个用于男性，另一个用于女性。我已将它们嵌入到HTML文件中的{bu} including中。我有两个按钮“男性”和“女性”，每个按钮在点击时显示相应的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”和“collor”的路径，但它们不会改变。

这是我改变颜色的方式

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

我知道这与我改变能见度或其他任何事情有关，但它很尴尬，所以帮助我。

Answer 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是您点击的按钮类。

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

你的JQuery以女性svg为目标将成为：

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

Here is a demo of the concept working

改变SVG的CSS没有做任何事情

2 个答案: