CODEWITHSUNDEEP
htmlsvgviewbox
Frank Millman
Frank Millman

Reputation: 693

SVG viewBox with negative coordinates

I want to create re-usable shapes that will automatically scale to fit the size of the given viewPort when used.

My approach is to enclose the shape in a 'symbol' element, and give it a viewBox with the same size as the shape itself.

This seems to work with a circle and a rectangle, but I am having trouble with a diamond shape, drawn using a path.

I have found a solution by creating a viewBox of (-1, -1, width+2, height+2), but I would like to know if this is officially supported, or if there is a better solution.

In the following example, the first shape is drawn directly, the second shape is derived from a 'use' element. If the viewBox starts with '0, 0', the left and top pixels are missing.

<html>

<svg width="200" height="200"
  style="margin:20px; border: 1px solid gray">
<path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
  stroke="black" stroke-width="2"
  stroke-linejoin="round" fill="transparent"
  transform="translate(20, 20)"/> 
</svg>

<svg style="display:none">
<symbol id="gw" viewBox="-1 -1 162 162">
  <path d="M 80 0 L 0 80 L 80 160 L 160 80 Z"
  stroke="black" stroke-width="2"
  stroke-linejoin="round" fill="transparent"/> 
</symbol>
</svg>

<svg width="200" height="200"
  style="margin:20px; border: 1px solid gray">
	<use href="#gw" width="160" height="160" transform="translate(20, 20)"/>
</svg>
  
</html>

Upvotes: 3

Views: 9213

Answers (2)

anden-akkio
anden-akkio

Reputation: 1247

This took me a while to debug - my issue was that I specified the viewbox as viewbox and not viewBox, so the viewBox wasn't even being applied. Check your capitalization!

Upvotes: 5

Tim Cooper
Tim Cooper

Reputation: 10468

It seems that negative coords for the origin are supported: https://www.w3.org/TR/SVG/coords.html implies that there is no restriction on the first two parts of a 'viewbox'. I've seen elsewhere that people sometimes use negative coords on a viewbox.

Upvotes: 3

Related Questions