как явно рисовать SVG ViewBox координаты

Question

У меня есть элемент SVG Viewbox рисовать волны следующим образом:

<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 не является «умным» графическим виджетам, это простой холст.

Атрибут viewbox в элементе svg устанавливает систему координат, в которой рисуется содержимое svg (его внутренние размеры, в отличие от фактических размеров пикселя при визуализации).