Можно ли применить отсечение в SVG без указания идентификатора пути отсечения?

В моей разметке у меня есть такой фрагмент:

<svg width="0" height="0" style="display:none" id="dummy-wedge">
 <g class="dummy" transform="translate(100, 100)">
    <defs>
      <clipPath id="clip1">
        <polygon id="clip1Shape" points="-100,-100 0,-100 0,0 -100,-20" />        
      </clipPath>
    </defs>
    <circle id="" cx="0" cy="0" r="52" fill-opacity="0" 
                  stroke="#ffffff" stroke-opacity="0.6" stroke-width="50" 
                  pointer-events="visiblePainted" clip-path="url(#clip1)" />
  </g>
</svg>

Что я хочу сделать, так это взять этот кусок и клонировать его в другой корневой элемент svg, чтобы создать кучу клиньев, каждый с разным положением и сегментом клипа. Это здорово, но разочарование заключается в том, что каждый клонированный элемент clipPath должен будет получить новый идентификатор, который затем нужно будет вставить в атрибут clip-path соответствующего элемента.

Я знаю, что если бы все дуги были одинаковой длины, я мог бы иметь общий клип и использовать преобразования поворота, но они не обязательно одинаковой длины.

Можно ли объявить отсеченный полигон, используя топологическую связь, а не явно называя его? В качестве альтернативы, есть ли лучший способ определить подобную дугу вне использования путей?

Спасибо.


svg clone clipping
person mikepurvis    schedule 11.03.2011    source источник
comment
Хороший вопрос. Я на 70% уверен, что вы не можете делать то, что хотите, но этого недостаточно, чтобы утверждать это категорично. Кажется, я припоминаю обсуждение этого в списке рассылки SVG, поскольку это относится и к другим областям (например, к элементам <use>); если я не могу найти его там, возможно, вы сможете. В качестве альтернативы вы можете написать надежную функцию cloneSVG(), которая выполняет клонирование и делает идентификаторы уникальными, добавляя указанную пользователем переменную, и знает обо всех атрибутах SVG, которые могут ссылаться на идентификатор, а также обновляет эти атрибуты.   -  person Phrogz    schedule 11.03.2011

Ответы (1)


arrow_upward
1
arrow_downward

Зачем нужно использовать отсечение? Не могли бы вы просто использовать элементы пути с различными сегментами дуги в них?

Не существует декларативного способа (пока) получить нужное вам поведение, но именно это и есть параметры SVG спецификация предназначена для адресации. Посмотрите на приведенные там примеры и реализацию скрипта для обработки контента (как способ поддержки текущих браузеров). ПРИМЕЧАНИЕ: это все еще рабочий проект, и в него могут быть внесены изменения.

person Erik Dahlström    schedule 12.03.2011
comment
В качестве альтернативы, есть ли лучший способ определить такую ​​дугу без использования путей? - person Phrogz; 12.03.2011