Могу ли я использовать смешанные единицы с элементом path?

Question

SVG имеет прямоугольный элемент, размеры которого могут быть указаны в процентах от размеров его владельца и радиус в пикселях. Таким образом, делая следующее

<div style="position: relative;">
<object class="AIRound" type="image/svg+xml"
data="data:image/svg+xml,<svg
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%'
height='100%' rx='10px' ry='10px' fill='#99ff99'
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px;
width:100%; height:100%; z-index:-100;"></object>
Sample text<br>Sample text
Sample text<br>Sample text
</div>

Я могу получить закругленные углы с постоянным радиусом, который не зависит от размера блока. Но простой прямоугольник с закругленными углами скучен, и иногда вам нужно что-то необычное (например, http://my.opera.com/). Я пытался использовать элемент 'path', но мне кажется, что мы не можем использовать смешанные единицы с 'path' ( пиксели и проценты.) Я также не могу использовать комбинацию фигур, потому что она не будет работать с полупрозрачными и градиентными заливками.

Значит, я могу использовать элемент «путь» со смешанными единицами? Может быть, есть еще одна работа, которую я не заметил?

Answer 1

Пути и списки точек могут быть указаны только в пользовательских единицах. Имея контейнер (например, svg или символьный элемент), который определяет новую систему координат с viewBox, можно влиять на то, к чему разрешают пользовательские блоки. Это все еще не решает все случаи.

Чтобы исправить еще несколько случаев, вы можете построить изображение, используя несколько фигур, каждая из которых имеет свой путь обрезки для удаления нежелательных частей. Вы можете взглянуть на генератор закругленных углов SVG для примера такого подхода.

Answer 2

К сожалению, координаты пути могут быть выражены только одной единицей, координатами области просмотра.

Answer 3

Есть обходной путь:

<svg width='100%' height='100%' viewBox='0 0 100 100'>
<!-- Now in here, a coordinate (25,50) corresponds to
     (25%,50%) of the outer viewport. -->
<path d="M36,96 C 54,100 94,73 97,61 ..."/>
</svg> 

Ref: http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html