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

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/< /а>). Я пытался использовать элемент «путь», но мне кажется, что мы не можем использовать смешанные единицы измерения с «путем» (пиксели и проценты). Я также не могу использовать комбинацию фигур, потому что она не будет работать с полупрозрачными и градиентными заливками.

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


svg html
person Евгений    schedule 15.07.2009    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

person Erik Dahlström    schedule 15.07.2009

arrow_upward
3
arrow_downward

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

person Williham Totland    schedule 15.07.2009

arrow_upward
1
arrow_downward

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

<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>

Ссылка: http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html

person ton    schedule 08.06.2015