En el lienzo, puedo representar cosas de acuerdo con un sistema de coordenadas y hacer que el CSS las represente de manera diferente:

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(1920, 1080); ctx.stroke();

 #canvas { width: 100px; height: 100px; border: 1px solid black; }

 <canvas id="canvas" width="1920" height="1080"> Your browser does not support the HTML5 canvas tag.</canvas>

Aunque debería ser una línea muy diagonal según las coordenadas JS, el CSS la aplasta para que el navegador la represente como un cuadrado con una línea diagonal de 45°.

En SVG no puedo hacer lo mismo con CSS.

 #svg { height: 100px; width: 100px; border: 1px solid black; }

 <svg id="svg" height="1080" width="1920"> <line x1="0" y1="0" x2="1920" y2="1080" style="stroke:rgb(255,0,0);stroke-width:2" /> Sorry, your browser does not support inline SVG. </svg>

Las coordenadas SVG son absolutas según los píxeles de la pantalla de la computadora.

¿Cómo puedo dibujar líneas en SVG de acuerdo con las propiedades originales de width y height de SVG, pero hacer que se representen bajo la transformación de cuadro delimitador de elemento de width height → de SVG?