如何更改单击文本标签上的 svg 颜色

Question

我在 SVG 中有以下标签：

<g>
    <use x="10" y="14" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" xlink:actuate="onRequest" id="PL-1-02" xlink:show="replace" xlink:href="#sfseat" />
</g>

    <rect x="43" y="18" width="25" style="fill:rgb(192,192,192); stroke:none;" rx="2" ry="2" height="30" />
<text x="18" y="35" style="stroke:rgb(0,0,0); stroke-width:0.5;">
    02
</text>

当我单击文本标签时，我必须更改 svg 的颜色。 请建议我如何在javascript中的点击文本标签上获取g元素。

Answer 1

有趣的是，这可以在没有任何 Javascript 的情况下解决。 SMIL 动画具有由事件触发的能力。 您可以使用简单的<set fill="freeze">标记作为矩形的子项来永久更改属性或 CSS 属性的值。 要点击的元素需要有一个id属性，然后你可以在<set>添加一个begin="myId.click" ：

 <svg viewBox="0 15 100 50"> <rect x="43" y="18" width="25" rx="2" ry="2" height="30" style="fill:rgb(192,192,192); stroke:none;"> <set attributeName="fill" to="rgb(192,0,0)" begin="trigger02.click" fill="freeze" /> </rect> <text id="trigger02" x="18" y="35" style="stroke:rgb(0,0,0); stroke-width:0.5;cursor:pointer"> 02 </text> </svg>

Answer 2

正如Radical Edward 的回答中所建议的，您可以编辑 SVG（或者，可能更好的是rect ）元素的 fill 属性——尽管通过分离样式，您可能会获得更清晰的结果和更好的可移植性。

使用类名进行样式设置

添加样式元素并单独定义样式：

<svg>
    <style>
        rect {
            stroke: none;
            fill: rgb(192,192,192);
        }

        rect.active {
            fill: rgb(255, 20, 20);
        }
    </style>
    <!-- The rest of your SVG -->
    <!-- The rect element with the inline style removed -->
    <rect
        x="43" 
        y="18" width="25" 
        rx="2" 
        ry="2" 
        height="30" 
    />
</svg>

监听文本元素上的点击事件

为了识别文本元素和矩形，我们将给它们一个唯一的 ID：

<rect 
    id="rect1" 
    x="43" 
    y="18" 
    width="25" 
    rx="2" 
    ry="2" 
    height="30" 
/>
<text 
    id="text1" 
    x="18" 
    y="35" 
    style="stroke:rgb(0,0,0); stroke-width:0.5;"
>

然后我们将在文本元素上添加一个事件侦听器：

var textElement = document.querySelector('#text1');
var rect = document.querySelector('#rect1');

textElement.addEventListener('click', function() {
    rect.classList.add('active');
});

以上将适用于 IE11，如果您仅针对现代浏览器或使用像 Babel 这样的转译器，您可以使用更现代的 ES6+ 语法和const和箭头函数； 对于较旧的浏览器（IE10 及以下），您需要 polyfill 或使用其他解决方法，请参阅MDN 上的“旧版 Internet Explorer 和 attachEvent”一章。

替代方法：修改`fill`属性的值

除了使用 style 元素，您还可以硬编码 rect 的 fill 属性，然后修改它：

<rect fill="rgb(195,195,195)" ... />

textElement.addEventListener('click', function() {
    rect.setAttribute('fill', 'rgb(255,20,100)');
});

编辑（根据 OP 的评论）

如果您无权访问 svg和多个 SVG 的内容，您至少应该将其包装在一个可识别的容器中（即使用 ID 或唯一的类名）以确保您正在处理正确的容器——如果可能的话

<div class="clickable-svg-container">
 <svg .../>
</div>

然后，您必须首先选择您的容器（或页面上的所有 svg），然后在其中搜索，以找到您想要观看和/或修改的元素：

var containers = document.querySelectorAll('.clickable-svg-container');

// Alternative: Pick all the SVG elements from the current document
// var svgs = document.querySelectorAll('svg');

// Now loop over your selected elements:
containers.forEach(function(container, index) {
  var rect = container.querySelector('rect');
  var text = container.querySelector('text');
  var group = container.querySelector('g');

  // now you can set up your event listener as seen above
  text.addEventListener(...);
});

现在您可以使用上述指南的其余部分来对点击事件做出反应。 请注意，您仍然可以 (a) 全局声明活动类的样式（例如，在 HTML 的<head />并使用类名来设置修改后的元素的样式或 (b) 直接在每个元素上修改fill属性。

在 MDN Web Docs 上阅读更多内容：

Element.querySelector
文档查询选择器
Document.querySelectorAll
上述方法中使用的 DOMStrings 只是字符串； 你可以使用任何有效的 CSS 选择器，这里有一个很好的概述和列表

Answer 3

        let totalUseTags=svg.getElementsByTagName('use');
        for(let i=0;i<totalUseTags.length;i++){
            let useParentElement=totalUseTags[i];
            let textElement=this.getSiblingTextElementOfUseTag(totalUseTags[i].parentElement.nextElementSibling);
            useParentElement.parentElement.appendChild(textElement)
        }
 
getSiblingTextElementOfUseTag(g){
        let i=1;
        while (g) {
            if(g.nodeName=='text'){  
                return g;
            }
            g = g.nextElementSibling;
            i++;
          }
    }

首先找出所有的use标签元素。
找到它们的父 g 标签元素。
找到他们的下一个文本标签兄弟元素。
将该文本元素附加到 g 标签。

如何更改单击文本标签上的 svg 颜色

问题描述

3 个解决方案

解决方案1
3 2020-08-24 16:08:17

解决方案2
1 2020-08-24 15:42:31

使用类名进行样式设置

监听文本元素上的点击事件

替代方法：修改`fill`属性的值

编辑（根据 OP 的评论）

解决方案3
0 2020-08-26 06:44:55

如何更改单击文本标签上的 svg 颜色

问题描述

3 个解决方案

解决方案1 3 2020-08-24 16:08:17

解决方案2 1 2020-08-24 15:42:31

使用类名进行样式设置

监听文本元素上的点击事件

替代方法：修改fill属性的值

编辑（根据 OP 的评论）

解决方案3 0 2020-08-26 06:44:55

解决方案1
3 2020-08-24 16:08:17

解决方案2
1 2020-08-24 15:42:31

替代方法：修改`fill`属性的值

解决方案3
0 2020-08-26 06:44:55