響應式SVG多邊形與相對點

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' 

這會對負載做出響應，但您必須使用其他磁貼來監視窗口大小。