SVG. Изменение точки отчета координат.

[LLIypuk]

Всем привет. Есть код.

<svg id="svg1" width="0" height="0" >
	<path class="overlay-path" d="M 0,0 300,0 1000,2000 0,2000" />
</svg>

Собственно 0,0 - это начало отчета координат сверху-справа. Однако хотелось вы изменить начальную точку чтобы начальная точка была сверху-слева и велся не слева-направо, а наоборот. Возможно ли такое сделать???

PS: также интересует - можно ли указывать координаты в процентах, а не в пикселях. Например d="M 0,0 300,0 1000,100% 0,100%" ???

[Malleys]

<ol>
 <li><p>Новая координатная система может быть установлена при помощи атрибута <em>viewbox</em> и/или <em>transform</em>.</p><p>
Пример. Красная линия начинается от начала координат, идёт вдоль оси x и имеет длину 50, зелёная линия же идёт вдоль оси у.</p><p>
Значение атрибута <em>viewbox</em> — четыре числа (<мин-х> <мин-у> <ширина> <высота>) разделённые запятой/пробелом, определяющие
прямоугольную область в координатной системе SVG, которая будет отображаться на холсте.</p><p>
<svg width="200" height="200" viewbox="0 0 100 100">
    <line x1="0" y1="0" x2="50" y2="0" stroke="deeppink" stroke-width="5"/>
    <line x1="0" y1="0" x2="0" y2="50" stroke="yellowgreen" stroke-width="5"/>
    <clipPath id="white-clip">
		<path id="white-path" d="M0 50 a70 80 0 0 1 100 0 a75 80 0 0 1 -100 0 Z"></path>
	</clipPath>
	<g transform="translate(50, 50) rotate(45) translate(-50, -50)">
		<use href="#white-path" fill="white"></use>
		<circle fill="black" stroke="teal" stroke-width="15" cx="40" cy="48" r="16" clip-path="url(#white-clip)"></circle>
		<circle fill="salmon" cx="0" cy="52" r="5" clip-path="url(#white-clip)"></circle>
	</g>
    </svg></p>
    
<p> То же самое, но теперь ось x повёрнута в противоположную сторону и подкорректирован viewbox</p><p>
<svg width="200" height="200" viewbox="-100 0 100 100">
	<g transform="scale(-1, 1)">
    	<line x1="0" y1="0" x2="50" y2="0" stroke="deeppink" stroke-width="5"/>
    	<line x1="0" y1="0" x2="0" y2="50" stroke="yellowgreen" stroke-width="5"/>
    	<clipPath id="white-clip">
			<path id="white-path" d="M0 50 a70 80 0 0 1 100 0 a75 80 0 0 1 -100 0 Z"></path>
		</clipPath>
		<g transform="translate(50, 50) rotate(45) translate(-50, -50)">
			<use href="#white-path" fill="white"></use>
			<circle fill="black" stroke="teal" stroke-width="15" cx="40" cy="48" r="16" clip-path="url(#white-clip)"></circle>
			<circle fill="salmon" cx="0" cy="52" r="5" clip-path="url(#white-clip)"></circle>
		</g>
    </g>
</svg></p>
</li>

<li><p>Координаты описывающие данные контура в атрибуте <em>d</em> не могут быть ни в процентах,
 ни в пикселях. Они измеряются в единицах координатной системы. В примере выше, картинка размером 200px×200px отображает
  прямоугольную область размером 100×100 единиц координатной системы.</p>
  <p>Та же самая картинка отображает 500×500 единиц координатной системы.</p><p>
<svg width="200" height="200" viewbox="-250 -250 500 500">
	<g transform="scale(-1, 1)">
    	<line x1="0" y1="0" x2="50" y2="0" stroke="deeppink" stroke-width="5"/>
    	<line x1="0" y1="0" x2="0" y2="50" stroke="yellowgreen" stroke-width="5"/>
    	<clipPath id="white-clip">
			<path id="white-path" d="M0 50 a70 80 0 0 1 100 0 a75 80 0 0 1 -100 0 Z"></path>
		</clipPath>
		<g transform="translate(50, 50) rotate(45) translate(-50, -50)">
			<use href="#white-path" fill="white"></use>
			<circle fill="black" stroke="teal" stroke-width="15" cx="40" cy="48" r="16" clip-path="url(#white-clip)"></circle>
			<circle fill="salmon" cx="0" cy="52" r="5" clip-path="url(#white-clip)"></circle>
		</g>
    </g>
</svg></p></li></ol>
<style>svg{background:gold}ol{font: 1.5em / 1.45 "Goudy Old Style",Baskerville,Garamond,Georgia,serif;}</style>