如何明確畫出SVG視框座標

Question

我有一個SVG視框中元素繪製波形如下：

<svg id="waveform" viewBox="0 -1 2000 2" preserveAspectRatio="none"> 
    <g id="waveform"> 
    <path id="waveform1" d="{{some data}}"/> 
    </g> 
</svg> 

中繪製波形預期。然而，它不會給我視圖框的x和y標籤，有什麼替代方式可以在網頁上添加視圖框的x和y標籤？

Answer 1

你的svg渲染一個單一的路徑，波形。如果你想繪製標籤軸，你需要渲染它們。例如，用帶標記的軸檢查這些SVG圖的來源：http://www.goat1000.com/svggraph-titles.php。你可能會想用庫來做到這一點。

svg元素不是一個「智能」圖形小部件，它是一個普通的畫布。

的svg元件上的viewbox屬性設置在其內的SVG內容繪製（其內部尺寸，相對於實際的像素尺寸，當它被渲染）的座標系。