clipPath не работает, если я использую <path>внутри clipPath, но работает для <circle> - PullRequest
Новая
       42

clipPath не работает, если я использую <path>внутри clipPath, но работает для <circle>

0 голосов
/ 19 февраля 2019

Я пытаюсь создать изображение clipPath с помощью svg.Я пытаюсь сделать это с помощью родного метода clipPath SVG.

Моя проблема в том, что если я буду использовать путь внутри изображения, оно не будет отображаться.Но если я использую круг вместо пути, он отображает без каких-либо проблем.

Мой код идет сюда, 

<svg width="660" height="495" style="background: #333">
  <defs>
    <clipPath id="ellipsePath">
      <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
    </clipPath>
  </defs>
  <image width="660" height="495" y="-100" xlink:href="https://placeimg.com/640/480/any" clip-path="url(#ellipsePath)"/>
</svg>

Вот скрипка

Может ли кто-нибудь помочь мне с этим?

1 Ответ

0 голосов
/ 19 февраля 2019

Спасибо, ребята, за вашу поддержку, добавив clipPathUnits = "objectBoundingBox" к clipPath , решившую мою проблему. 

<svg width="256" height="248" style="background: #333">
<defs>
    <clipPath id="ellipsePath" clipPathUnits="objectBoundingBox">
        <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                    C1.034,0.478,1.092,0.198,0.785,0.075z"></path>

    </clipPath>
</defs>
<image width="100%" height="100%"  xlink:href="https://placeimg.com/256/248/any" clip-path="url(#ellipsePath)"/>

Вот обновленная скрипка

...