javascript - 响应式修改 svg 弧的最快方法？

Question

我正在使用 SVG 创建大量广泛使用圆弧的矩形。当尝试使 SVG 具有响应性时，问题就来了，因为当 SVG 在 vi​​ewBox 内并且不能很好地缩放时，弧坐标将保持不变。

目前，我已经提出了“概念验证”。调整父容器大小时，SVG 路径将被删除然后重绘。我现在只是在测试高度属性，我已将其设置为 vw单元。

http://plnkr.co/edit/duFwRXxVw5HREgFDQS0a?p=preview

如您所见，它可以工作，但是在调整大小时删除和重绘 SVG 路径的想法似乎会非常慢，尤其是当它们更多的时候。我认为修改现有路径会更有效，而不是不断地从头开始删除和重绘它们。我想知道是否可以将事件监听器附加到每个弧坐标，并在调整容器大小时仅更改这些数字？

如果重绘 SVG 是唯一可行的选择，我也乐于接受其他方法的建议，这些方法可以使这更快，那么在 <canvas> 中重新创建此实现可能更有意义？我想最终将鼠标悬停事件附加到每个路径，所以我不确定在这方面使用 Canvas 是否有优势？

希望问题很清楚，如果您需要我进一步解释，请告诉我!

下面的代码；

---

var doc = document;
var times = ['times', 10, 11, 12, 13, 14, 15, 16]

function getNode(n, v) {
    n = document.createElementNS("http://www.w3.org/2000/svg", n);
    for (var p in v)
        n.setAttributeNS(null, p.replace(/[A-Z]/g, function (m, p, o, s) {
            return "-" + m.toLowerCase();
        }), v[p]);
    return n
}

// CREATE TIME LIST

function createList() {


    for (var i = 0; i < times.length; i++) {
        var el = doc.getElementById('times');
        el.appendChild(doc.createElement('div'))
        el.getElementsByTagName('div')[i].setAttribute('class', 'info')
        doc.getElementsByClassName('info')[i].innerHTML = times[i]
    }


}

// CREATE SVG

function createSvg() {

    times.shift()
    
    var container = doc.getElementById('headings')
    var svg = doc.getElementById('graphic')

    var height = 100;
    var width = 100;

    var cellHeight = height / times.length;
    var cellWidth = width;
    
    var cHeight = container.clientHeight;
    var rHeight = cHeight / 100;

    var perc = (n) => (height / 16) * n;

    var container = doc.getElementById('headings')

    var calcY = '6.25'

    var y;


    if(height < cHeight){
        y = (calcY / rHeight).toString()

        var fixHeight = (calcY - y) * 2;

        perc = (n) => (((height / 16) * n) + fixHeight)
    } else {
        y = calcY
        perc = (n) => (((height / 16) * n))
    }
    var rectA = getNode('path', {
        d: 'm0 ' + y +
        'a6.25 ' + y + ' 0 0 1 6.25 -' + y +
        'h87.5' +
        'a6.25 ' + y + ' 0 0 1 6.25 ' + y +
        'v' + perc(4.5).toString() +
        'a6.25 ' + y + ' 0 0 1 -6.25 ' + y +
        'h-43.75 ' +
        'a6.25 ' + y + ' 0 0 0 -6.25 ' + y +
        'v' + perc(1).toString() +
        'a6.25 ' + y + ' 0 0 1 -6.25 ' + y +
        'h-31.25 ' +
        'a6.25 ' + y + ' 0 0 1 -6.25 -' + y,
        fill: 'steelblue'
    })


    var rectB = getNode('path', {
        d: 'm0 ' + (height - y).toString() +
        'a6.25 ' + y + ' 0 0 0 6.25 ' + y +
        'h87.5 ' +
        'a6.25 -' + y + ' 0 0 0 6.25 -' + y +
        'v-' + perc(7.5).toString() +
        'a-6.25 -' + y + ' 0 0 0 -6.25 -' + y +
        'h-43.75 ' +
        'a-6.25 ' + y + ' 0 0 0 -6.25 ' + y +
        'v'+ perc(1).toString()  +
        'a-6.25 ' + y + ' 0 0 1 -6.25 ' + y +
        'h-31.25 ' +
        'a6.25 ' + y + ' 0 0 0 -6.25 ' + y,
        fill: 'crimson'
    })

    var rects = [rectA, rectB]

    for (let i = 0; i < rects.length; i++) {
        svg.append(rects[i])
    }

}

// REMOVE ON RESIZE

function resize() {
    var svg = doc.getElementById('graphic')

    var ele = svg.getElementsByTagName('path')

    for(var i = 0; i < ele.length; i++){
        ele[i].remove()
    }

    createSvg()
}

createList();
createSvg();

#headings {
  position: relative;
  width: 200px;
  height: 40vw;
  margin: 15px 15px;
}

#headings #times {
  width: 50%;
  height: 100%;
  float: left;
}

#headings #times .info {
  width: 100%;
  height: 5.7vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#headings #svg {
  width: 50%;
  height: 100%;
  float: left;
}

#headings #svg .heading {
  height: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="headings">
    <div id="times"></div>
    <div id="svg">
      <div class="heading">Rects</div>
      <svg id="graphic" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" onresize="resize()"></svg>
    </div>
  </div>

旁注:如果您有兴趣了解在没有响应式缩放但增加了父级高度的情况下圆弧的外观，click here.

Answer 1

您可以通过使用百分比和蒙版来模拟您的绘图。这样它将“响应”并缩放到您想要的任何大小，而根本不会改变您的路径...... 抚摸是可能的，但会非常棘手;-)

function changeSize() {
  var w = Math.random() * 200 + 100
  var h = Math.random() * 200 + 100
  svg.setAttribute("width", w)
  svg.setAttribute("height", h)
}

<button onclick="changeSize()">change size</button><br/>
<svg id="svg" width="50" height="200">
  <symbol id="arc" overflow="visible">
    <path d="M0,0H10A10 10 0 0 0 0 10z" stroke="white" />
  </symbol>
  <symbol id="arc2" overflow="visible">
    <path d="M0,0H10A10 10 0 0 0 0 10z" transform="rotate(180)" stroke="white" />
  </symbol>
  <mask id="upper">
    <rect x="0" y="0" width="100%" height="40%" rx="10" ry="10" fill="white" />
    <rect x="0" y="0" width="50%" height="60%" rx="10" ry="10" fill="white" />
    <use xlink:href="#arc" x="50%" y="40%" fill="white" />
  </mask>

  <mask id="lower">
    <rect x="0" y="60%" width="100%" height="40%" rx="10" ry="10" fill="white" />
    <rect x="50%" y="40%" width="50%" height="60%" rx="10" ry="10" fill="white" />
    <use xlink:href="#arc2" x="50%" y="60%" fill="white" />
  </mask>

  <rect x="0" y="0" width="100%" height="100%" fill="blue" mask="url(#upper)" />
  <rect x="0" y="0" width="100%" height="100%" fill="red" mask="url(#lower)" />
</svg>