Drawing a line with negative coordinates in SVG.js

Question

I am trying to scale my SVG down width 0.5 and then draw a line from positive to negative coordinates, but it seems that it renders only to x:0 and y:0.

Does SVG.jsnot support drawing with negative coordinates, or am I doing something wrong here?

My code:

const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})

draw.rect(100, 100).attr({ fill: '#f06' })

draw.scale(0.5, 0.5, 0, 0)

draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })

My outcome:

Sli4o · Accepted Answer · 2022-11-01T05:11:51.730

In SVG, drawing outside the viewBox is allowed, but will not be displayed. The documentation to the viewBox can be found here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

I believe what you are looking for is:

const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})

draw.rect(100, 100).attr({ fill: '#f06' }).move(100,100)

draw.scale(0.5, 0.5, 0, 0)

draw.line(0, 0, 300, 300).stroke({ width: 3, color: '#000' })
draw.line(300, 0, 0, 300).stroke({ width: 3, color: '#000' })

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.10/dist/svg.min.js"></script>


<div id="designerDiv" style="width: 300px; height: 300px;"></div>

But if you want to work with negative coordinates, you can also just adjust the viewBox.

const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'}).viewbox(-100, -100, 300, 300)

draw.rect(100, 100).attr({ fill: '#f06' }).move(-50,-50)

draw.scale(0.5, 0.5, 0, 0)


draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.10/dist/svg.min.js"></script>


<div id="designerDiv" style="width: 300px; height: 300px;"></div>

Thanks a lot for the feedback. Both suggested approach does what I wanted to achieve. May I ask for your personal preference between both suggested approaches? Or would you mind providing me with your pros/cons on that? — Stefan Walter, Nov 01 '22 at 05:48
@StefanWalter depends what you want to achieve. With/without a viewBox is very different and there are [plenty of questions already on this](https://stackoverflow.com/questions/19484707/how-can-i-make-an-svg-scale-with-its-parent-container/19485375#19485375) — Robert Longson, Nov 01 '22 at 06:31

swatchai · Answer 2 · 2022-11-04T18:14:23.777

You need to set the values of svg's viewBox to cover the plotting area. Here I show the real SVG code.

viewBox is the attribute of the svg element. You will need to define it properly in your implementation with svg.js.

<p>1 Circle: center:(0,0), radius:50<tspan>; Viewport, Top-Left:(0,0); width-height:(150,100)</tspan></p>
<svg width="150" height="100" viewBox="0 0 150 100">
  <style>svg {background-color: lightgray;} </style>
  <ellipse cx="0" cy="0" rx="50" ry="50"></ellipse>
</svg>

<p>2 Circle: center:(0,0), radius:50<tspan>; Viewport, Top-Left:(-75,-50); width-height:(150,100)</tspan></p>
<svg width="150" height="100" viewBox="-75 -50 150 100">
  <ellipse cx="0" cy="0" rx="50" ry="50"></ellipse>
</svg>

Drawing a line with negative coordinates in SVG.js

2 Answers2