SVG path addendum

[okh]

A quick addendum to SVG paths described in the guide - for information. Out of curiosity, I tested quadratic Bézier curves in SH3D SVG path cutouts, and they seem to work just fine. [:)] (To be expected, but impressive anyway... so thanks!)

Probably of limited general interest, but for anyone who wants to experiment with funny staircases or highly ornamented windows with different fronts and backs, there are a couple cutouts that could be easier using the full range of SVG path commands. And using a transparent box, it is possible to use the Furniture Library Editor and SVG cutout to create highly custom openings without having to create a 3D object.

There may be limitations when it comes to browser visualisation. Inkscape will read such paths (but appears to avoid writing them, preferring normal C/c curveto instead).

ok

PS. Example of additional path command (a wave-shaped cutout on top of a limited rectangle).

Code: Select all

m.15,.15 q.05,-.05 .1,0 t .1,0 t .1,0t .1,0t .1,0t .1,0t .1,0 v.5 h-.7 z

From W3C, on paths:

Q/q x1 y1 x y
- quadratic Bézier curve to (x,y) using (x1,y1) as the control point

T/t x y
- quadratic Bézier curve to (x,y), control point is assumed to be the reflection of the control point on the previous command relative to the current point


And testfile (with different paths, albeit in a 100,100 co-ordinate system):

Code: Select all

<svg version="1.1"
	width="100" height="100"
	preserveAspectRatio="xMinYMin meet" 
	viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
<path
 id="linet00"
 d="
 M 10,10 30,10 10,30 z
 l 20,20"
 style="fill:pink;stroke:green;stroke-width:1px;stroke-opacity:1" />
<path
 id="arc00"
 d="
 M 50,20
 a 10,10 0 0,1 20,0 z"
 style="fill:none;stroke:blue;stroke-width:1px;stroke-opacity:1" />
<path
 id="curveto00"
 d="
 M 10,40
 c 20,-10 40,10 60,0
 Z"
 style="fill:none;stroke:red;stroke-width:1px;stroke-opacity:1" />
 <path
 id="curveto01"
 d="
 M 10,50
 c 10,-5 10,5 20,0 
 10,-5 10,5 20,0 
 10,-5 10,5 20,0 
 10,-5 10,5 20,0"
 style="fill:none;stroke:teal;stroke-width:1px;stroke-opacity:1" />
<path
 id="quadraticcurve00"
 d="
 M10,70 
 q20,-25 40,0 
 t40,0"
 style="fill:none;stroke:maroon;stroke-width:1px;stroke-opacity:1" />     
<path
 id="waves000"
 d="
 M10,90 
 q 5,-5 10,0 
 t 10,0 
 t 10,0 
 t 10,0 
 t 10,0 
 t 10,0
 t 10,0
 t 10,0"
 style="fill:none;stroke:navy;stroke-width:1px;stroke-opacity:1" />
</svg>