Question

我使用SVG创建了许多广泛使用弧形的矩形。当试图使SVG响应时会出现问题，因为当SVG位于viewBox内并且不能很好地缩放时，弧坐标将保持不变。

目前，我已经提出了一个概念证明＆＃39;。调整父容器的大小后，将删除SVG路径，然后重新绘制。我现在只是使用height属性进行测试，我将其设置为vw单位。

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

正如你所看到的那样，但是在调整大小时删除和重绘SVG路径的想法似乎可能非常慢，特别是如果它们有更多的话。我认为修改现有路径会更有效，而不是不断地在头上删除和重绘它们。我想知道是否可以将事件侦听器附加到每个弧坐标，并在调整容器大小时更改这些数字？

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

希望问题很明确，如果您需要我进一步解释，请告诉我！

以下代码;

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

旁注：如果您有兴趣了解如何在没有响应缩放但父母身高增加的情况下看起来如何，click here.

Answer 1

你可以通过使用百分比和面具来模仿你的绘画。这样它就会响应＆＃34;并扩展到你想要的任何尺寸，而根本不改变你的路径...... 抚摸是可能的，但会非常棘手; - ）

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: