URL пути клипа не может найти идентификатор

Question

У меня есть SVG, который я пытаюсь использовать для обрезки div, но идентификатор, который я даю тегу <clipPath>, не работает.

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

svg выглядит так:

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559">
    <defs>
    <clipPath id="clipper">
    <g id="svgg" stroke="none" fill-rule="evenodd">
         <path  id="path0" d= .../>
         <path  id="path1" d= .../>
         <path  id="path2" d= .../>
         <path  id="path3" d= .../>
         <path  id="path4" d= .../>
    </g>
    </clipPath>
    </defs>
</svg>

Я добавил теги <defs> и <clipPath>, чтобы я мог использовать svg, который у меня был, в качестве обтравочной маски.

Используемый html-элемент:

<div class="logo-bg" style="clipPath: url(#clipper)"></div>

div имеет ширину и высоту.

В инструментах разработчика свойство css div, которое я пытаюсь обрезать с помощью clip-path: url(#clip-id), показывает "не удалось загрузить изображение". В идеале я мог бы обрезать div с SVG.

вот код, с которым я работаю: https://jsfiddle.net/mzLtsqva/6/

Я новичок в работе с SVG и буду признателен за помощь в решении этой проблемы.

Answer 1

Внутри <clipPath> не переносите пути в элементе группы.

В следующем примере я использую обтравочный контур, который не работает: #no и тот, который работает: #yes.В тот, который не работает, я обертываю элементы внутри в элемент <g>.

svg{border:1px solid;}

<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
 <rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/> 
 <clipPath id="no"> 
   <g>
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
    </g>
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>  
</svg>

<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>  
 <clipPath id="yes">  
    <use xlink:href="#rect" fill="none"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
    <use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>  
 </clipPath>   
  </defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>  
</svg>