Как использовать SVG clipPath с символами и <use> - PullRequest
Новая
       31

Как использовать SVG clipPath с символами и <use>

1 голос
/ 21 апреля 2019

У меня есть следующий SVG, который работает: 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" />
    </symbol>

    <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
      <rect width='100' height='100' stroke="none"/>
    </symbol>
  </defs>

  <use xlink:href="#rect" width="300" height="300" x="100" y="100"/>
  <use xlink:href="#triangle" width="120" height="150" x="180" y="100" fill="white" transform="rotate(180, 250, 175)"/>
</svg>

Но потом, когда я пытаюсь превратить его в clipPath, оно становится пустым.Хотите знать, как заставить clipPath работать.Вот что я попробовал. 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" />
    </symbol>

    <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
      <rect width='100' height='100' stroke="none"/>
    </symbol>
    
    <clipPath id="clip">
      <use xlink:href="#triangle" width="120" height="150" x="180" y="100" fill="white" transform="rotate(180, 250, 175)"/>
    </clipPath>
  </defs>

  <use xlink:href="#rect" width="300" height="300" x="100" y="100" clip-path="url(#clip)"/>
</svg>

Цель состоит в том, чтобы вырезать треугольник из прямоугольника при использовании функции <use>.Позже у меня может быть гораздо более сложный пример обтравочного контура, это только демонстрирует проблему.

1 Ответ

1 голос
/ 22 апреля 2019

Из спецификации SVG:

https://www.w3.org/TR/SVG11/single-page.html#masking-EstablishingANewClippingPath

Элемент 'clipPath' может содержать элементы 'path', элементы 'text', основные фигуры (например, 'circle'') или элемент' use '.Если элемент 'use' является дочерним для элемента 'clipPath', он должен напрямую ссылаться на элементы 'path', 'text' или basic shape. Косвенные ссылки - это ошибка

...