Question

我正试图像标题所说的那样将图像添加到SVG路径。

我做了以下小提琴，
JSFiddle

我想将图像放在路径中，如此，
（代表图像的绿点） so image

如何做到这一点？我尝试将图像添加到路径中，但显然它们并没有显示出来。

代码：

<svg width="175" height="175">
  <g transform="translate(87.5,87.5)">
    <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
    <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
    <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
    <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
    <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
  </g>
</svg>

Answer 1

在图片后面，您需要添加5个圆圈。

每个圆圈相对于另一个圆圈旋转相同的角度 - 360/5 = 72

创建第一个圈子：

<defs> <circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" /> </defs>

使用命令<use>克隆圆圈并将其transform =" rotate (deg x y) "旋转到相对于第一个圆圈的所需角度。

 
 <svg width="175" height="175" > 
 <defs>
 <circle id="greenCircle" cx="13" cy="98"  r="10" fill="#B6FF00" /> 
 </defs>
  <g transform="translate(87.5,87.5)">
    <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path>
    <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path>
    <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path>
    <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path>
    <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path>
    <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path>
  </g> 
  
<use xlink:href="#greenCircle"  transform="rotate(-10 87.5 87.5)" /> 
<use xlink:href="#greenCircle"  transform="rotate(62 87.5 87.5)" /> 
<use xlink:href="#greenCircle"  transform="rotate(134 87.5 87.5)" /> 
<use xlink:href="#greenCircle"  transform="rotate(206 87.5 87.5)" /> 
<use xlink:href="#greenCircle"  transform="rotate(278 87.5 87.5)" />  

</svg>

Answer 2

这里有一个提示，请将其添加到你的小提琴中：

<circle cx="0" cy="0" r="10" fill="#12345"></circle>

SVG路径和图像

2 个答案: