如何明确画出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内容绘制（其内部尺寸，相对于实际的像素尺寸，当它被渲染）的坐标系。