1

我有由多个多边形组装而成的 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 我试图让这个圆相对于它的父多边形。所以我可以将 circle 设置为 x=0 y=0 并将其保持在父多边形的区域内。

4

2 回答 2

1

可以通过多种方式将图像插入到任何 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>

于 2019-09-20T23:23:24.777 回答
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>

于 2019-09-21T13:32:44.717 回答