Javascript 如何从多边形动态更新SVG viewBox值

我已经创建了漫画书页面面板的SVG地图

<svg id="svg1413"  class="svg-pg" width="100%" height="100%" version="1.1" viewBox="0 0 178 254" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="transition: .6s ease-out;">
    <image id="image1966" width="178" height="254" clip-path="url('#SvgjsClipPath1413')" xlink:href="https://i.imgur.com/yiZFUK4.jpg" />
    <g id="SvgjsG1413" clip-path="url('#SvgjsClipPath1413')" class="click-panels">
        <polygon fill="transparent" points=" 12,13 88,13 88,49 12,49"></polygon>
        <polygon fill="transparent" points=" 81,44 166,44 166,74 81,74"></polygon>
        <polygon fill="transparent" points=" 12,13 166,13 166,75 12,75"></polygon>
        <polygon fill="transparent" points=" 101,80 166,80 166,118 101,118"></polygon>
        <polygon fill="transparent" points=" 12,80 166,80 166,147 12,147"></polygon>
        <polygon fill="transparent" points=" 12,152 91,152 91,200 12,200"></polygon>
        <polygon fill="transparent" points=" 73,171 155,171 155,209 73,209"></polygon>
        <polygon fill="transparent" points=" 12,198 79,198 79,235 12,235"></polygon>
        <polygon fill="transparent" points=" 12,152 166,152 166,235 12,235"></polygon>
    </g>
    <defs id="SvgjsDefs1413">
        <clipPath id="SvgjsClipPath1413">
            <rect id="SvgjsRect1413" width="100%" height="100%" x="0" y="0">
            </rect>
        </clipPath>
    </defs>     
</svg>
<svg>
    ...svg content
</svg>
<svg>
    ...svg content
</svg>

更新值

if
e=x1，f=y1

更新：如何通过单击/滑动事件控制转换，而不是使其自动进行

<div id="controls" class="ctl-btn" style="width: 100%; position: absolute; bottom: 0; margin: 0 -8px; background-color: rgba(6,6,6,0.40);">
    <div style="max-width: 800px; text-align: center; margin: 0 auto;">
        <button class="pg-ctl-bk" style="margin: 8px; padding: 8px 10px;">  Back </button>
        <button class="pg-ctl-nxt" style="margin: 8px; padding: 8px 10px;"> Next  </button>
    </div>
</div>

返回
下一个

我不知道您为什么在这里使用元素，而您所需要的只是一个javascript数组/JSON，或者最终使用的元素至少具有

x

、

y

、

width

和

height

属性，正如

viewBox

属性所要求的，但是。。。让我们来处理这个问题，然后

要将您的

点

属性值转换为

viewBox

属性，最简单的方法是调用

polygoneElement.getBBox（）

，它将返回一个包含所需值的SVGRect

要使

viewBox

属性设置动画，最简单的方法可能是使用SMIL动画，以及MS浏览器的多边形填充

您只需定义一个针对

viewBox

属性的元素，并在将其

属性从

更新为当前值后，将其

更新为目标值

// animate : <animate attributeName="viewBox" ...>
// rect : {SVGRect} result of polygonElement.getBBox();
function animateViewBox(animate, rect) {
  animate.setAttribute('from', animate.getAttribute('to'));
  animate.setAttribute('to', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
  animate.beginElement(); // (re)start the animation
}

您使用了svg.js标记，因此得到了一个svg.js答案：


//对svg的引用
const canvas=SVG（“#svg1413”）
//所有多边形的列表
const polygons=canvas.find（“#SvgjsG1413 polygon”）
//所有BBox的列表
常量框=polygons.bbox（）
const nextImage=函数（索引）{
//将viewbox动画设置为1s以上的新长方体
canvas.animate（1000）.viewbox（框[索引]）
//2秒后的下一张图片
setTimeout（（）=>nextImage（++索引），2000）
}
下一页（0）
svg{
宽度：100%；
身高：100%；
最大宽度：100vw；
最大高度：100vh；
}
html{
背景：黑色；
}

我不明白，如果您想根据循环中的所有多边形更新您的视口，为什么不只对最后一个多边形进行更新？viewBox一次只能有一个值，因此它也可以这样做。你能澄清一下你真正想要的是什么吗？我想循环所有多边形（如旋转木马），在每个多边形上，我想用循环中的当前多边形（旋转木马）计算的值更新父视口。这是一个我想要实现的示例。感谢这一点，它解决了我的大部分问题（调整事物的良好起点）。但是，如果我想使用单击/滑动事件来控制转换，而不是使其自动进行，我该如何实现这一点。我已使用和按钮更新了我的主要帖子。这是从那时起的基本javascript。例如，只要单击下一个按钮，您就可以增加计数器，并使用递增按钮调用nextImage显示下一张图片的mented计数器。在这种情况下，Ofc您不需要设置TIMOUTE。但是，这是一个您应该能够轻松解决的问题！感谢这一点，它回答了我的大部分问题。如何通过单击/滑动事件来控制转换/动画，而不是使其自动进行？
onclick=e=>iterate（）
谢谢，它工作得很好。但是，在最后一个多边形之后，我希望它转换到另一个多边形，并在该多边形中循环，等等。我不太精通Javascript。
<div id="controls" class="ctl-btn" style="width: 100%; position: absolute; bottom: 0; margin: 0 -8px; background-color: rgba(6,6,6,0.40);">
    <div style="max-width: 800px; text-align: center; margin: 0 auto;">
        <button class="pg-ctl-bk" style="margin: 8px; padding: 8px 10px;">  Back </button>
        <button class="pg-ctl-nxt" style="margin: 8px; padding: 8px 10px;"> Next  </button>
    </div>
</div>

// animate : <animate attributeName="viewBox" ...>
// rect : {SVGRect} result of polygonElement.getBBox();
function animateViewBox(animate, rect) {
  animate.setAttribute('from', animate.getAttribute('to'));
  animate.setAttribute('to', `${rect.x} ${rect.y} ${rect.width} ${rect.height}`);
  animate.beginElement(); // (re)start the animation
}