我可以使用内部 JavaScript 循环浏览 SVG 的元素，添加和删除类吗？

问题描述 投票：0回答：1

我有一个选择小部件的 SVG 图像，带有左右箭头和一个显示所选数字/颜色的矩形（请参阅下面的代码片段）。我想让这个 SVG 图像具有交互性，以便查看者可以单击箭头来循环显示可用的数字/颜色对。一切都需要在 

<svg></svg>
标签内；我无法使用外部 HTML 或脚本。 SVG 文件将添加到 HTML 网页的 
<object>
标记中以保持交互性。

我想出了如何将箭头制作成锚元素，单击时会亮起并调用 JavaScript 函数，但我不确定如何使左右函数更改可见的数字。目前，我将所有数字/颜色对作为 svg 组，具有公共类 

cls-security
和特定数字的唯一类 
net-0
到 
net-8
。所有具有 
cls-security
类的组均使用 
visibility: hidden
进行样式化，但也具有 
on
类的组会使用 
visibility: visible
覆盖该类。我的想法是，
cycleLeft()
函数应该识别哪个具有类
cls-security
的元素也具有类
on
，从该元素中删除类
on
，转到上一个具有类
cls-security
的元素（循环）如果需要的话，绕到最后），并将类 
on
添加到该元素；并且 
cycleRight()
函数应该执行相同的操作，但移动到具有 
cls-security
类的下一个元素，而不是移动到具有该类的上一个元素。然而，我正在努力弄清楚如何实现这一点。

如果有更好的方法来达到我想要的效果，上面段落中讨论的所有内容都可以更改。

我走在正确的道路上吗？有更好的方法来做我想做的事吗？

<svg id="Object-Panel-Security" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="72" viewBox="0 0 132 72">
    <defs>
        <style>
            .cls-txt-security {
                font-size: 16px;
                font-family: Arial, Helvetica, sans-serif;
                text-anchor: middle;
            }
            .cls-btn-security {
                opacity: 0;
            }
            a:active > .cls-btn-security {
                opacity: 1;
            }
            .cls-security {
                visibility: hidden;
            }
            .cls-security.on {
                visibility: visible;
            }
        </style>
    </defs>
    <g id="Object-Panel-Security-BG">
        <rect x="0" width="132" height="72"/>
        <rect x="4" y="4" width="124" height="64" fill="#dbcad1"/>
        <polygon points="27 12 27 27 31 27 31 45 27 45 27 60 25.875 60 12 36.125 12 35.875 25.875 12 27 12"/>
        <polygon points="105 12 105 27 101 27 101 45 105 45 105 60 106.125 60 120 36.125 120 35.875 106.125 12 105 12"/>
    </g>
    <text id="Object-Panel-Security-Title" class="cls-txt-security" transform="translate(66 27)">Sec Net</text>
    <a href="javascript:void(0)" onclick="cycleLeft()" id="Object-Panel-Security-Cycle-Left">
        <rect x="12" y="12" width="19" height="48" fill="#bebebe" opacity="0"/>
        <polygon points="25 18 25 29 29 29 29 43 25 43 25 54 14.5 36 25 18" fill="#fff" class="cls-btn-security"/>
    </a>
    <a href="javascript:void(0)" onclick="cycleRight()" id="Object-Panel-Security-Cycle-Right">
        <rect x="101" y="12" width="19" height="48" fill="#bebebe" opacity="0"/>
        <polygon points="107 18 107 29 103 29 103 43 107 43 107 54 117.5 36 107 18" fill="#fff" class="cls-btn-security"/>
    </a>
    <g id="Object-Panel-Security-Network-X" class="cls-security net-0">
        <rect x="35" y="34" width="62" height="22" fill="#a6a6a6"/>
        <text class="cls-txt-security" transform="translate(66 51)">X</text>
    </g>
    <g id="Object-Panel-Security-Network-1" class="cls-security net-1 on">
        <rect x="35" y="34" width="62" height="22" fill="#ca0000"/>
        <text class="cls-txt-security" transform="translate(66 51)">1</text>
    </g>
    <g id="Object-Panel-Security-Network-2" class="cls-security net-2">
        <rect x="35" y="34" width="62" height="22" fill="#7cb400"/>
        <text class="cls-txt-security" transform="translate(66 51)">2</text>
    </g>
    <g id="Object-Panel-Security-Network-3" class="cls-security net-3">
        <rect x="35" y="34" width="62" height="22" fill="#005eca"/>
        <text class="cls-txt-security" transform="translate(66 51)">3</text>
    </g>
    <g id="Object-Panel-Security-Network-4" class="cls-security net-4">
        <rect x="35" y="34" width="62" height="22" fill="#e6ba08"/>
        <text class="cls-txt-security" transform="translate(66 51)">4</text>
    </g>
    <g id="Object-Panel-Security-Network-5" class="cls-security net-5">
        <rect x="35" y="34" width="62" height="22" fill="#00a1b9"/>
        <text class="cls-txt-security" transform="translate(66 51)">5</text>
    </g>
    <g id="Object-Panel-Security-Network-6" class="cls-security net-6">
        <rect x="35" y="34" width="62" height="22" fill="#ca00b9"/>
        <text class="cls-txt-security" transform="translate(66 51)">6</text>
    </g>
    <g id="Object-Panel-Security-Network-7" class="cls-security net-7">
        <rect x="35" y="34" width="62" height="22" fill="#de7f00"/>
        <text class="cls-txt-security" transform="translate(66 51)">7</text>
    </g>
    <g id="Object-Panel-Security-Network-8" class="cls-security net-8">
        <rect x="35" y="34" width="62" height="22" fill="#00ca94"/>
        <text class="cls-txt-security" transform="translate(66 51)">8</text>
    </g>
    <script>//<![CDATA[
        function cycleLeft() {
            return false;
        }
        function cycleRight() {
            return false;
        }
    //]]></script>
</svg>

javascript svg interactive
1个回答
0
投票

您可以使用查询选择器获取当前选定的选项，然后对其减去或添加一个数字。

由于您“打开”使用类，因此您可以切换类或仅添加或删除它们，就像我在下面的示例中所示的那样。

function cycleLeft() {
  const parent = document.querySelector("svg > .cls-security.on")
  const elementNum = parent.querySelector("text").innerHTML
  const num = parseInt(elementNum) - 1 || 0
  parent.classList.remove("on")
  const newElem = document.querySelector(`svg > .cls-security.net-${num}`)
  newElem.classList.add("on")

}

function cycleRight() {
  const parent = document.querySelector("svg > .cls-security.on")
  const elementNum = parent.querySelector("text").innerHTML
  const num = Math.min((parseInt(elementNum) || 0) + 1 , 8)
  parent.classList.remove("on")
  const newElem = document.querySelector(`svg > .cls-security.net-${num}`)
  newElem.classList.add("on")
}
<svg id="Object-Panel-Security" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="72" viewBox="0 0 132 72">
    <defs>
        <style>
            .cls-txt-security {
                font-size: 16px;
                font-family: Arial, Helvetica, sans-serif;
                text-anchor: middle;
            }
            .cls-btn-security {
                opacity: 0;
            }
            a:active > .cls-btn-security {
                opacity: 1;
            }
            .cls-security {
                visibility: hidden;
            }
            .cls-security.on {
                visibility: visible;
            }
        </style>
    </defs>
    <g id="Object-Panel-Security-BG">
        <rect x="0" width="132" height="72"/>
        <rect x="4" y="4" width="124" height="64" fill="#dbcad1"/>
        <polygon points="27 12 27 27 31 27 31 45 27 45 27 60 25.875 60 12 36.125 12 35.875 25.875 12 27 12"/>
        <polygon points="105 12 105 27 101 27 101 45 105 45 105 60 106.125 60 120 36.125 120 35.875 106.125 12 105 12"/>
    </g>
    <text id="Object-Panel-Security-Title" class="cls-txt-security" transform="translate(66 27)">Sec Net</text>
    <a href="javascript:void(0)" onclick="cycleLeft()" id="Object-Panel-Security-Cycle-Left">
        <rect x="12" y="12" width="19" height="48" fill="#bebebe" opacity="0"/>
        <polygon points="25 18 25 29 29 29 29 43 25 43 25 54 14.5 36 25 18" fill="#fff" class="cls-btn-security"/>
    </a>
    <a href="javascript:void(0)" onclick="cycleRight()" id="Object-Panel-Security-Cycle-Right">
        <rect x="101" y="12" width="19" height="48" fill="#bebebe" opacity="0"/>
        <polygon points="107 18 107 29 103 29 103 43 107 43 107 54 117.5 36 107 18" fill="#fff" class="cls-btn-security"/>
    </a>
    <g id="Object-Panel-Security-Network-X" class="cls-security net-0">
        <rect x="35" y="34" width="62" height="22" fill="#a6a6a6"/>
        <text class="cls-txt-security" transform="translate(66 51)">X</text>
    </g>
    <g id="Object-Panel-Security-Network-1" class="cls-security net-1 on">
        <rect x="35" y="34" width="62" height="22" fill="#ca0000"/>
        <text class="cls-txt-security" transform="translate(66 51)">1</text>
    </g>
    <g id="Object-Panel-Security-Network-2" class="cls-security net-2">
        <rect x="35" y="34" width="62" height="22" fill="#7cb400"/>
        <text class="cls-txt-security" transform="translate(66 51)">2</text>
    </g>
    <g id="Object-Panel-Security-Network-3" class="cls-security net-3">
        <rect x="35" y="34" width="62" height="22" fill="#005eca"/>
        <text class="cls-txt-security" transform="translate(66 51)">3</text>
    </g>
    <g id="Object-Panel-Security-Network-4" class="cls-security net-4">
        <rect x="35" y="34" width="62" height="22" fill="#e6ba08"/>
        <text class="cls-txt-security" transform="translate(66 51)">4</text>
    </g>
    <g id="Object-Panel-Security-Network-5" class="cls-security net-5">
        <rect x="35" y="34" width="62" height="22" fill="#00a1b9"/>
        <text class="cls-txt-security" transform="translate(66 51)">5</text>
    </g>
    <g id="Object-Panel-Security-Network-6" class="cls-security net-6">
        <rect x="35" y="34" width="62" height="22" fill="#ca00b9"/>
        <text class="cls-txt-security" transform="translate(66 51)">6</text>
    </g>
    <g id="Object-Panel-Security-Network-7" class="cls-security net-7">
        <rect x="35" y="34" width="62" height="22" fill="#de7f00"/>
        <text class="cls-txt-security" transform="translate(66 51)">7</text>
    </g>
    <g id="Object-Panel-Security-Network-8" class="cls-security net-8">
        <rect x="35" y="34" width="62" height="22" fill="#00ca94"/>
        <text class="cls-txt-security" transform="translate(66 51)">8</text>
    </g>
</svg>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.