在svg路徑中的垂直線不顯示

我正在嘗試一些基本的svg動畫，並且在繪製一個簡單的多邊形時遇到了困難。出於某種原因，我的形狀的垂直線不顯示。在svg路徑中的垂直線不顯示

這裏是我的代碼：

.path { 
 
    fill: red; 
 
    stroke: black; 
 
    stroke-width: 5px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <path class="path" d="M160,60 L-160,60 l0,-60 z"> 
 
</svg>

而這裏的我得到的結果是：bad shape

我在做什麼錯在這裏？提前致謝。

來源

2017-08-08 cyang2

在我看來就像它的形狀簡單的位置，我認爲負值帶離其邊框的觀點，因此，你實際上並沒有看到左三角形的一側。 –

如果您還不熟悉它，可以右鍵單擊網頁並選擇「檢查」以查看實況內容的詳細信息。檢查你的多邊形確實表明它在你的可視區域之外，因此不顯示左邊。 – yanman1234

該行在視口之外。您可以更改viewBox屬性值或將您的形狀替換爲右側。見下面的工作示例。

.path { 
 
    fill: red; 
 
    stroke: black; 
 
    stroke-width: 5px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-200 -10 400 80"> 
 
    <path class="path" d="M160,60 L-160,60 l0,-60 z"/> 
 
</svg>

來源

2017-08-08 14:02:49 Alexander

現在它顯示出整個形狀，這是很棒的，但它的規模已經擴大了。你是如何確定viewBox值的？ – cyang2

@ cyang2，看看你的SVG的路徑值。路徑從點_x = 160，y = 60_開始（參見'M160,60'）。然後畫線到_x = -160，y = 0_（見'L-160,60'）。下一段'l0，-60'繪製寬度等於_0_的線，高度等於_-60_（相對座標）。 'z'關閉電路。因此，最小_x_值等於_-160_，最小y值等於_0_，寬度是__ 320_，高度是_60_。我增加了這個值的模塊，以適應vieport的形狀。使用[preserveAspectRatio]（https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute）強制統一縮放。 – Alexander

@ cyang2，你的問題解決了嗎？你需要額外的解釋嗎？ – Alexander

在svg路徑中的垂直線不顯示

回答

相關問題