Как придать SVG-фигуре фоновое изображение - PullRequest
Новая
       39

Как придать SVG-фигуре фоновое изображение

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

У меня есть фигура SVG, на которой будет фоновое изображение.Я хотел бы сделать это CMS фоновым изображением редактируемым, чтобы вместо того, чтобы просто вставлять изображение, я хочу сделать это с контейнером SVG, которому назначено фоновое изображение, или, по крайней мере, что-то, что я могу использовать, чтобы разрешить вывод PHPизображение, если оно изменяется с помощью CMS.

Итак, я создал желаемую фигуру в Illustrator и экспортировал, поскольку SVG предоставляет следующий код: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
  <style>
    .cls-1{fill:#eeeeef;}
    .cls-2{fill:url(#linear-gradient);}
    .cls-3{fill:url(#linear-gradient-2);}
    .cls-4{fill:url(#linear-gradient-3);}
  </style>
  <linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#fff"/>
    <stop offset="0" stop-color="#9bdbf4"/>
    <stop offset="0" stop-color="#29b2e7"/>
    <stop offset="1" stop-color="#8082be"/>
  </linearGradient>
  <linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/>
  <linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/>
  </defs>
  <title>Asset 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/><path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
      <path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/>
      <path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
      <path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
    </g> 
  </g>
</svg>

Серая часть, которую я бы хотел покрыть изображением, которое не переполняется из серого контейнера svg.

Не могу найтичто-нибудь, что действительно обращается к этому формату SVG?

Ответы [ 3 ]

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

Добавьте cls-1 paths к определению clipPath (скажем, с id #clip_path) и добавьте элемент image (образец красного изображения ниже) со стилем url(#clip_path) - см. Демонстрациюниже: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
  <style>
    .cls-1{fill:#eeeeef;}
    .cls-2{fill:url(#linear-gradient);}
    .cls-3{fill:url(#linear-gradient-2);}
    .cls-4{fill:url(#linear-gradient-3);}
    .mask {clip-path: url(#clip_path);}
  </style>
  <linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#fff"/>
    <stop offset="0" stop-color="#9bdbf4"/>
    <stop offset="0" stop-color="#29b2e7"/>
    <stop offset="1" stop-color="#8082be"/>
  </linearGradient>
  <linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/>
  <linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/>
  <clipPath id="clip_path">
      <path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
      <path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/>
      <path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
  </clipPath>
  </defs>
  <title>Asset 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
     <image class="mask" xlink:href="https://placehold.it/500/FF0000"></image>
     <path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/>
      <path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/>
  </g>
  </g>
</svg>
0 голосов
/ 08 февраля 2019

Мне удалось найти решение для этого, сделав следующее.2 ответа, похоже, тоже делают свое дело:) 

<!-- SVG Shape saved as .svg in illustrator -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs><style>.cls-1{}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:url(#linear-gradient-3);}</style><linearGradient id="linear-gradient" y1="108.72" x2="70.49" y2="108.72" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#9bdbf4"/><stop offset="0" stop-color="#29b2e7"/><stop offset="1" stop-color="#8082be"/></linearGradient><linearGradient id="linear-gradient-2" x1="-0.01" y1="189.83" x2="70.49" y2="189.83" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="-0.01" y1="112.73" x2="70.49" y2="112.73" xlink:href="#linear-gradient"/></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/>

<!-- This is the path that the image should be contained withing. The "fill" is the id of the <defs> tag which defines what the image is -->
<path fill="url(#imgpattern)" class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/><path class="cls-2" d="M.59,88.53C.59,68.36,11.43,50.4,27.73,36-25.13,79.85,4.93,146.43,56.49,181.45,25.1,159.62.59,122.29.59,88.53Z"/><path class="cls-3" d="M70.49,189.89l0,0-.17-.09Z"/><path class="cls-1" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/><path class="cls-4" d="M28.17,35.61l-.44.38C11.43,50.4.59,68.36.59,88.53c0,33.76,24.51,71.09,55.91,92.92a149.9,149.9,0,0,0,13.79,8.33l.17.09C29.69,164.57-9.32,88.88,28.17,35.61Z"/></g></g>



<!-- This is what defines what the bg of SVG should be. Add your ACF code to xlink:href="" to echo the image. -->
<defs>
      <pattern id="imgpattern" x="0" y="0" width="1" height="1">
        <image width="100%" height="100%"
        preserveAspectRatio="xMinYMin slice"
               xlink:href="image1.jpg"/>
      </pattern>
  </defs>

</svg>
0 голосов
/ 07 февраля 2019

Для ясности я упростил ваш код.

Я использую ваш серый путь в качестве пути для элемента clipPath, а для изображения я использую clip-path="url(#_clip)"

svg{width:90vh;}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 208.23 200.22"><defs>
  
  <clipPath id="_clip">
       <path d="M70.28,189.78a149.9,149.9,0,0,1-13.79-8.33A122.87,122.87,0,0,0,70.28,189.78Z"/><path class="cls-1" d="M126.47.05C95-.91,55.84,11.75,29.71,33.48l.45-.36c-39.1,52.11-2.4,128.95,37.57,155.47,12.55,6.94,25.83,11.17,38.86,11.57,51.64,1.57,100-27.44,101.58-79.08S178.11,1.62,126.47.05Z"/>
  </clipPath>
  
  </defs>
  <title>Asset 1</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
       <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="240" width="250" clip-path="url(#_clip)"></image>
    </g> 
  </g>
</svg>
...