具有相对点

Question

如何创建宽度响应/可扩展的SVG多边形，但包含必须在峰值点保持原位的相对点？

这显示了我正在努力实现的目标：

有人可以帮忙吗？感谢。

Answer 1

一种方法是迭代相对点并标准化唯一视图的宽度和高度像素。

var originalPointsString = '0,0 0,1 1,1 1,0 0,0'; //points to a square
var newPointsStr = '';
forEach(originalPointsString.split(' '), function(point){
    var x = point.split(',')[0], // gets the x coord from each point
        y = point.split(',')[1]; // gets the y coord from each point
    var hPx = Math.floor((window.innerWidth / 100) * x), // gets how many pixels per percent in a given view's width
        vPx = Math.floor((window.innerHeight / 100) * y); // gets how many pixels per percent in a given view's height
    newPointsStr += hPx +','+vPx+' '; // build new point coords based on the normalized view percents
})
// Given example 1000px x 500px view
// newPointsStr === '0,0 0,5 10,5 10,0 0,0'

这将对负载做出响应，但您必须使用其他魔法来监视窗口调整大小。