SVG. Изменение точки отчета координат.
Всем привет. Есть код.
<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%" ??? |
<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>
|
| Часовой пояс GMT +3, время: 12:44. |