SVG - центрировать изображение по кругу без заливки изображения - PullRequest
Новая
       26

SVG - центрировать изображение по кругу без заливки изображения

1 голос
/ 24 июня 2019

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

Вот HTML-код, может кто-нибудь, пожалуйста, помогите 

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" x="0%" y="0%" height="100%" width="100%"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://ppcaxis.com/cat-150.jpg"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
  <circle id="sd2" class="medium" cx="25%" cy="50%" r="10%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
<circle id="sd3" class="medium" cx="25%" cy="80%" r="15%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

Единственный вызов для меня - НЕ изменять размер и заполнять изображение в кругу.

1 Ответ

2 голосов
/ 25 июня 2019

Общий ответ на этот вопрос заключается в том, что вам нужно использовать patternUnits="userSpaceOnUse", чтобы сделать шаблоны относительно текущей системы координат, а не относительно объекта, к которому они применяются.

Например,в приведенном ниже SVG я установил шаблон 200x200.Обратите внимание, что он имеет одинаковый размер независимо от радиуса каждого круга.Кроме того, он повторяется независимо от размера и положения круга. 

<svg id="graph" width="100%" height="400px">

  <!-- pattern -->
  <defs>
    <pattern id="image" patternUnits="userSpaceOnUse" x="0" y="0" height="200" width="200"
             viewBox="0 0 512 512">
      <image x="0%" y="0%" width="512" height="512" xlink:href="https://ppcaxis.com/cat-150.jpg"></image>
    </pattern>
  </defs>
    
  <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
  <circle id="sd2" class="medium" cx="25%" cy="50%" r="10%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
<circle id="sd3" class="medium" cx="25%" cy="80%" r="15%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>

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

...