Как достигнуть 'дыр пончика' с путями в Raphael
Я хотел бы потянуть форму, которая имеет дыры в нем таким образом, что я могу fill форма этому и не заполнили дыры тем цветом (оставляют их прозрачными).
Согласно спецификации пути W3:
Составные контуры (т.е. путь с несколькими подпутями) возможны позволить эффекты, такие как "дыры пончика" в объектах.
Кто-то может дать очень простой пример того, как выполнить это с векторным контуром в Raphael?
Большое спасибо.
1 ответ
Оказывается, это довольно просто, если вы знаете трюк. Например это не работает :
paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
" M 75 75 L 75 125 L 125 125 L 125 75 z")
.attr("fill", "#f00");
Но это работает *:
paper.path("M 50 50 L 50 150 L 150 150 L 150 50 z" +
" M 75 75 L 125 75 L 125 125 L 75 125 z")
.attr("fill", "#f00");
Разница в том, что для появления бублика внутренний путь должен иметь его вершин, нарисованных в обратном порядке к внешнему контуру (т. Е. Рисуем одну по часовой стрелке, а другую - против часовой стрелки). Я нашел лакомый кусочек в архивах text.xml.svg.devel .
(*) По крайней мере, работает в Chrome, Opera и Firefox 4.0 beta, но не в 3.6