通过 javascript 调整 SVG viewBox 行为答案

【问题标题】：Tweak SVG viewBox behaviour via javascript通过 javascript 调整 SVG viewBox 行为
【发布时间】：2019-09-25 11:36:35
【问题描述】：

我正在使用香草 javascript 来浏览漫画书的页面。但是，我需要设置一个条件来检查当前多边形中的点是否与下一个多边形中的点相交。如果为 true，我希望 viewBox 从当前点动画到下一个点，如果为 false，则不发生任何事情（使用默认的淡入淡出过渡）。

这是我的一段代码

var DELAY = 400;

function nextArea() {
    if (isFirstPage() || areaIndex >= areas.length - 1) {
      changePage(true);
      changeArea();
    } else {
      fade();
      areaIndex++;
      setTimeout(changeArea, DELAY);
    }
  }

  function prevArea() {
    if (isLastPage() || areaIndex <= 0) {
      changePage(false);
      changeArea();
    } else {
      fade();
      areaIndex--;
      setTimeout(changeArea, DELAY);
    }
  }

  function changeArea() {
    if (isFirstPage() || isLastPage()) {
      return;
    }

    var activeArea = areas[areaIndex];
    var points = activeArea.getAttribute('points').split(' ');
    var xy1 = points[0].split(',');
    var xy2 = points[1].split(',');
    var xy3 = points[2].split(',');
    var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];

    activePage.classList.remove('fade');
    activePage.setAttribute('viewBox', box.join(' '));
    activeRect = rects[pageIndex - 1];
    activeRect.setAttribute('x', xy1[0]);
    activeRect.setAttribute('y', xy1[1]);
  }

我的代码库在这里：https://github.com/cnario/svg-carousel

这是我目前所拥有的：https://cnario.github.io/svg-carousel/

这是我期望它的行为方式：https://read.marvel.com/#book/41323

【问题讨论】：

标签： javascript svg svg-animate

【解决方案1】：

我想这就是您可能需要的：一种将 viewBox 从一个值转换为另一个值的方法，这样每次您在 viewBox 中只有一个 svg 的一部分。

let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();


let radios = document.querySelectorAll("#controls input");

radios.forEach(r =>{
  let color = r.dataset.color;
  let bb = BB[color];
  
  r.addEventListener("change",()=>{
    svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
    svg.style.height = `${bb.height * 300 / bb.width}px`; 
  })
  
})

svg {
  width: 300px;
  border: 1px solid;
  height: 600px;
  transition: height 1s;
}

<p id="controls">
  <label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
  <label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
  <label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>

<svg id="svg" viewBox="0 0 100 200">
  <g id="tomato">
    <circle cx="35" cy="70" r="25" fill="tomato" />
  </g>
  <g id="skyblue">
    <ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
  </g>
  <g id="gold">
    <polygon fill="gold" points="75,15 60,30 90,30" />
  </g>
</svg>

【讨论】：