具有相对点的响应式 SVG 多边形答案

【问题标题】：Responsive SVG polygon with relative points具有相对点的响应式 SVG 多边形
【发布时间】：2016-02-07 18:41:20
【问题描述】：

如何创建一个宽度可响应/可缩放的 SVG 多边形，但包含必须保持在峰值点的相对点？

这显示了我想要完成的工作：

有人可以帮忙吗？谢谢。

【问题讨论】：

高度变化时会发生什么？会剪辑吗？如果是这样，您需要自己通过捕获调整大小事件并确定在哪里绘制什么来做出响应。
高度应该保持不变（即 100 像素），如果这就是您的意思吗？
那么在 SVG 中很难做到。

标签： svg polygon

【解决方案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'

这将在加载时做出响应，但您必须使用其他魔法来观察窗口大小。

【讨论】：

我使用了一个函数，该函数从具有 coords 属性的对象中获取 originalPointsString，并且每个多边形都通过该函数。