如何在 SVG 多边形内居中元素

Question

我有由多个多边形组合而成的 SVG。我试图将 image/button 放在多边形中心内，但无论我尝试什么，它总是将图像放在屏幕的 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 我正在尝试 使这个圆相对于它的父多边形 。所以我可以将 circle 设置为 x=0 y=0 并将其保留在父多边形的区域内。

Answer 1

可以通过多种方式将图像插入任何 SVG 形状：

使用clipPath
使用 mask
使用 pattern

任何插入图片的方法，都需要关注模板的形状。

如果模板的形状是对称的，则需要select原始图像具有相同的纵横比。

换句话说，如果裁剪图案是圆形或正多边形，那么您需要select 具有相同宽度和高度的图像。

我将 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>

Answer 2

问题作者评论的新答案

在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>

如何在 SVG 多边形内居中元素

How to center element inside SVG polygon

svg

react-native

react-native-svg

1。使用 `clipPath`

2。使用 `mask`

3。使用 `pattern`

如何在 SVG 多边形内居中元素

How to center element inside SVG polygon

svg

react-native

react-native-svg

1。使用 clipPath

2。使用 mask

3。使用 pattern

1。使用 `clipPath`

2。使用 `mask`

3。使用 `pattern`