SVG/JavaScript：試圖選擇和更改多邊形點

我想用JavaScript來選擇和更改下面的多邊形形狀中的第二個點。我的意圖是根據瀏覽器寬度水平移動它，以便它指向我整體設計中的某些東西。SVG/JavaScript：試圖選擇和更改多邊形點

<svg viewBox="0 0 100 10" preserveAspectRatio="none" height="100px" width="100%"> 
    <polygon id="wedge" points="100,1 38,10 0,1 0,0 100,0"></polygon> 
</svg>

這是JavaScript函數，與第二多邊形點的調整涉及：

var wedge = document.getElementById('wedge'); 
var browserWidth = window.innerWidth; 
var contentWidth = 960; 
var margin = 80; 

function wedgeAdjust() { 
    var breakpoint = contentWidth + (2 * margin); 

    if (browserWidth > breakpoint) { 
    wedge.points[1].x = (((browserWidth - contentWidth)/2)/browserWidth) * 100; 
    } else if (browserWidth <= breakpoint) { 
    wedge.points[1].x = (margin/browserWidth) * 100; 
    } 
}

當加載頁面時，此功能被觸發，當瀏覽器調整（在調整browserWidth變量首先被更新）。

我的問題是這樣的：一切工作正常在鉻，但在我的iPad（Safari），沒有任何反應。我嘗試添加如下的提醒：

alert(wedge.points);

這給了我兩個瀏覽器中的「[Object SVGPointList]」。但是，事情就變得有趣，當我將其更改爲特定點我想改變，像這樣：

alert(wedge.points[1]);

這讓我在鍍鉻以下內容：[對象SVGPoint]（這是很酷的，因爲它讓我恰克的x值）。但在iPad（Safari）上，我返回「未定義」。使整個功能失敗。

我在做什麼錯？任何幫助和反饋將不勝感激。

謝謝！

來源

2015-04-08 Knut

wedge.points是SVGPointList類型的對象，它似乎不支持標準下標訪問（[ ]）。您可以使用wedge.points.getItem(1)而不是wedge.points[1]。

來源：Microsoft SVGPointList documentation

來源

2015-04-08 12:47:56 joews

這樣做！非常感謝你:) – Knut

請upvote如果它幫助你，它有助於展示未來的用戶，這是一個很好的質量答案:) – joews

我很想，但我沒有足夠的聲望upvote呢：/ – Knut

SVG/JavaScript：試圖選擇和更改多邊形點

回答

相關問題