Как обрезать SVG внутри штриха? - PullRequest
Новая
       0

Как обрезать SVG внутри штриха?

0 голосов
/ 17 апреля 2020

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

enter image description here

(форма постоянна, но размер и обводка могут быть переменными, поэтому я стараюсь избегать математических операций с шириной обводки напрямую)

Я читал много уроков по CSS отсечение, которое обычно имеет несколько тривиальных примеров с использованием обтравочного контура многоугольника, а затем опускается в фрагменты грамматики BNF, описывающей, как можно использовать геометрическое окно без каких-либо значимых примеров.

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

.clip-me {clip-path: полигон (10% 20%, 20% 30%, 50% 80%) поле для полей; маржа: 10%; }

В случае элементов SVG, [geometry-box] может быть заполнить, обводка и представление. Поле просмотра значения будет использовать ближайший видовой экран SVG в качестве справочного окна, если поле просмотра не указано.

Я интерпретировал это как значение, если замена поля поля на поле заполнения установила бы относительный полигон к синему прямоугольнику в моем примере (ограничивающий прямоугольник заливки пути), чтобы я мог создать многоугольник с шириной 100% и высотой> 100%. На практике, когда я устанавливаю стиль на "clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%) fill-box", он вообще не обрезается, а эквивалент, без указания геометрических рамок, обрезается по средней линии обводки.

Есть ли способ установить обтравочный контур относительно ограничивающего прямоугольника заливки пути SVG, так что я могу закрепить его на красном прямоугольнике или каким-либо другим способом удалить эти боковые штрихи и сохранить заливку?

Мой минимальный воспроизводимый пример : 

<html>

<body>
  <svg width="960" height="960">
      <g stroke-width="15" stroke="#000">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" 
              style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);" >
        </path>
      </g>
    </svg>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Как говорит chriskirknielsen , по умолчанию штрихи SVG рисуются по центру пути. Вместо дублирования пути можно использовать атрибут paint-order, чтобы заливка была нарисована выше обводки, чтобы внутренняя часть обводки не отображалась.

Обратите внимание, что чтобы сохранить визуальную ширину обводки, вам нужно удвоить ее ширину, потому что фактически половина ее покрыта заливкой. 

<html>

<body>
  <svg width="960" height="960">
      <g stroke-width="30" stroke="#000">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc" 
              style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%); paint-order: stroke;" >
        </path>
      </g>
    </svg>
</body>

</html>
1 голос
/ 17 апреля 2020

Штрихи в SVG "разливаются" с обеих сторон пути, поэтому, например, штрих 10px будет иметь 5px снаружи и 5px внутри (охватывающий область заливки), что выглядит как то, что происходит в вашем примере. Вы можете поместить свой clip-path в группу и продублировать свой путь: ниже: штрих; выше: заливка. 

<html>

<body>
  <svg width="960" height="960">
      <g style="clip-path: polygon(0% -30%, 0% 130%, 100% 130%, 100% -30%);">
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" stroke-width="15" stroke="#000"/>
        <path d="M20 35 l 160 -20 l 0 140 l -160 20 l 0 -140 z" fill="#ccc"/>
        </path>
      </g>
    </svg>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...