svg - SVG 路径背景

Question

我想用背景图像替换中间的绿色形状（仅在白色区域）。

带有绿色形状的图像

对于该图像，我希望能够设置 CSS 属性（或 SVG 等价物），例如 background-position: xx% xx% 和 transform: scale(xx)。这些能够在任何方向改变图像位置，并能够放大或缩小。

我已经尝试过使用路径模式，但它不成比例，也不好看：

看看我尝试了什么

我想保留蓝色边框，只将图像放在白色圆圈的中间。

标签： svg

Answer 1

部分困惑可能是您将图像放在<g>对其进行转换的组中。如果将图像移到这些<g>元素之外，则坐标更容易处理。

现在，（至少）有两种方法可以将图像切割成圆形并将其放置在您想要的位置：

1. 使用带<pattern>/<image>填充的路径（很像您的示例）。
2. 使用<image>带有clip-path.

请参阅此 SVG 末尾附近有关这些替代方案的评论：

<svg viewBox="0 0 170.08 170.08" width="170.08" height="170.08" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g transform="matrix(1.333333, 0, 0, -1.333333, 0, 170.080002)" id="g10">
    <g transform="scale(0.1)" id="g12">
      <path id="path14" style="fill:#fffd51;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 1275.59,0 H 0 V 1275.59 H 1275.59 V 0"></path>
      <path id="path16" style="fill:#deddde;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.797,70.8711 c -313.109,0 -566.9337,253.8169 -566.9337,566.9219 0,313.109 253.8247,566.937 566.9337,566.937 313.105,0 566.923,-253.828 566.923,-566.937 0,-313.105 -253.818,-566.9219 -566.923,-566.9219 z M 0,1275.59 V 0 H 1275.59 V 1275.59 H 0"></path>
      <path id="path18" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 1182.7,803.25 -83.09,-27.371 c 0,0 -15.88,47.094 -28.69,73.266 l 78.42,34.035 c -36.89,82.5 -92.99,138.56 -92.99,138.56 l -56.31,-66.342 c -88.317,100.652 -217.81,164.272 -362.231,164.272 -6.926,0 -13.793,-0.23 -20.645,-0.52 l 9.481,85.56 c 0,0 -79.282,3.67 -164.434,-26.6 l 29.719,-80.97 c -25.43,-8.07 -49.903,-18.26 -73.313,-30.25 l -37.254,78.35 C 300.449,1105 244.98,1047.7 244.98,1047.7 l 68.875,-53.161 C 216.836,906.391 155.918,779.199 155.918,637.781 c 0,-2.597 0.156,-5.156 0.195,-7.742 l -85.2341,11.035 c 0,0 -4.8008,-79.211 23.4063,-165.07 l 80.8318,27.16 c 7.465,-25.695 16.879,-50.547 28.313,-74.277 l -77.184,-34.453 c 38.281,-81.875 93.649,-139.735 93.649,-139.735 l 54.214,67.145 C 361.871,220.91 490.852,156.828 634.902,155.969 L 620.797,69.3594 c 0,0 78.945,-4.9375 166.043,19.1406 l -24.949,83.602 c 25.769,6.847 50.644,15.828 74.519,26.648 l 31.36,-79.398 c 83.601,34.328 141.38,88.66 141.38,88.66 l -64.712,58.008 c 107.042,88.394 175.252,222.105 175.252,371.761 0,4.434 -0.21,8.821 -0.33,13.223 l 84.98,-13.211 c 0,0 5.12,79.141 -21.64,165.457"></path>
      <path id="path20" style="fill:none;stroke:#bdbcbc;stroke-width:2.18309999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 1077.17,637.781 c 0,-242.656 -196.705,-439.359 -439.361,-439.359 -242.657,0 -439.371,196.703 -439.371,439.359 0,242.657 196.714,439.369 439.371,439.369 242.656,0 439.361,-196.712 439.361,-439.369 z"></path>
      <path id="path22" style="fill:#234d86;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 637.809,1070.07 c -238.746,0 -432.286,-193.543 -432.286,-432.289 0,-238.738 193.54,-432.281 432.286,-432.281 238.738,0 432.281,193.543 432.281,432.281 0,238.746 -193.543,432.289 -432.281,432.289 z m 0,-115.004 c 174.949,0 317.285,-142.332 317.285,-317.285 0,-174.949 -142.336,-317.285 -317.285,-317.285 -174.954,0 -317.286,142.336 -317.286,317.285 0,174.953 142.332,317.285 317.286,317.285"></path>

      <g transform="scale(10)" id="g24"></g>

      <g transform="translate(637.5,637.5) scale(1, -1) translate(-637.5,-637.5)">
        <path id="top-text" d="M 637.5 637.5 m -340 0 a 340 340 0 0 1 680 0" fill="none" stroke="none"></path>
        <text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
           <textPath baseline-shift="10%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#top-text">test</textPath>
        </text>
      </g>

      <g transform="translate(637.5,637.5) scale(-1, 1) translate(-637.5,-637.5)">
        <path id="bottom-text" d="M 637.5 637.5 m 340 0 a 340 340 180 0 0 -680 0" fill="none" stroke="none"></path>
        <text font-stretch="ultra-condensed" text-anchor="middle" stroke-width="2" style="white-space: pre" font-family="Arial" font-size="42" fill="#FFFFFF" stroke="#FFFFFF">
           <textPath baseline-shift="-90%" font-stretch="ultra-condensed" startOffset="50%" xlink:href="#bottom-text">text text text</textPath>
        </text>
      </g>

    </g>
  </g>

  <!--
    Alternative 1: A path (e.g. a <circle>) with an image fill.
    Note: The size of the pattern's <image> must correspond to the path's size (here: 40% diameter).
  -->
  <pattern id="path138img" patternUnits="objectBoundingBox" width="100%" height="100%">
    <image xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" width="40%" height="40%" />
  </pattern>
  <circle id="path138" cx="50%" cy="25%" r="20%" fill="url(#path138img)" />

  <!--
    Alternative 2: An <image> with a clipPath (e.g. a <circle>).
    Note: With `objectBoundingBox`, the coordinates for the clipPath's <circle> are relative to the clipped image, ranging from 0 to 1.
  -->
  <clipPath id="myClip" clipPathUnits="objectBoundingBox" >
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>
  <image x="30%" y="55%" width="40%" height="40%" clip-path="url(#myClip)" xlink:href="https://configurator.kriger.nl/uploads/cropped/kingfischer_1.jpg" />

</svg>

设置缩放和定位的地方：