Как центрировать элемент внутри многоугольника SVG

Question

У меня есть SVG, который собран из нескольких полигонов.Я пытаюсь поместить изображение / кнопку в центр многоугольника, но что бы я ни старался, всегда помещаю изображение на x=0 and y=0 экрана.

<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
    <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
            <Polygon id="RX-03" points="206.65269...">
            </Polygon>
            <Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />              
        </G>

С этим я получаю:

Но если я поставлю <Circle x="110" y="0", я получу

И это правильно, но я не хочу использовать x = 110, я пытаюсь сделать этот круг относительным к родительскому многоугольнику .Поэтому я могу установить окружность на x = 0 y = 0 и оставить ее внутри области родительского многоугольника.

Answer 1

Новый ответ на комментарий автора вопроса

В svg при взаимном позиционировании между элементами существует только абсолютное позиционирование.
Относительное позиционирование в svg, как вы хотите - естьне является кругом относительно родительского многоугольника.Только абсолютное позиционирование круга поможет разместить его в нужном месте. Вы можете создать круг один раз и клонировать его несколько раз при позиционировании:

<use xlink:href="#crc1" x="100" y="150" />

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
  <defs>
    <circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>	
	<image transform="translate(0, -300)" xlink:href="https://i.stack.imgur.com/q0PXl.png"
             width="100%" height="100%"
        />
		<use xlink:href="#crc1" x="100" y="150"  />
		  <use xlink:href="#crc1" x="210" y="110"  />
		    <use xlink:href="#crc1" x="300" y="190"  /> 
			  <use xlink:href="#crc1" x="385" y="190"  />
			    <use xlink:href="#crc1" x="500" y="190"  />
</svg>
</div>

Answer 2

Изображение может быть вставлено в любую форму SVG несколькими способами:

1. Использование clipPath
2. Использование mask
3. Использование pattern

При любом способе вставки изображения необходимо сосредоточиться на форме шаблона.

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

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

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

Выбранное круглое изображение badge

Вставьте это изображение в шестиугольник`

1.Использование clipPath

Шестиугольник действует как шаблон обрезки.

<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794"  >
  <defs>
    <clipPath id="clip">
     <path fill="none" stroke="none" stroke-width="2" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
    </clipPath> 
</defs>	
	<image xlink:href="https://i.stack.imgur.com/gOrJU.png"
       x="0"y="0"
       width="100%" height="100%"
       clip-path="url(#clip)" />
</svg>
</div>

2.Использование mask

.container {
width:50%;
height:50%;
}
image {
 mask:url(#msk1);
 }

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794" >
  <defs>
    <mask id="msk1">
     <path fill="white" stroke="red" stroke-width="12" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
    </mask> 
</defs>	
		<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="0" y="0" width="100%" height="100%" />
</svg>
</div>

3.Использование pattern

.container {
width:50%;
height:50%;
}

path {
fill:url(#ptn1);
stroke:#DBC176;
stroke-width:8;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 546 794"  >
  <defs>
    <pattern id="ptn1" width="1" height="1">
      <image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="-24" y="3" width="400px" height="400px"  /> 
    </pattern> 
</defs>	
	
	<path  d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</svg>
</div>