在

Question

我希望将图片放入nonagon ，就像这样

我尝试了几种方法，例如在 SVG 中使用标签但是图像与nonagon重叠，或者使用<defs><pattern>标签，但图像只是在多边形内重复了

这是我用来生成nonagon的代码：

＆＃13;

＆＃13;

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300.000000 300.000000" preserveAspectRatio="xMidYMid meet" class="svg">
  <metadata>
    <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/">
      <rdf:description dc:title="Nonagon" dc:publisher="Hiox" dc:date="2015-05-14" dc:format="image/svg+xml" dc:language="en">
        <dc:creator>
          <rdf:bag>
            <rdf:li>svgimages.com</rdf:li>
          </rdf:bag>
        </dc:creator>
      </rdf:description>
    </rdf:rdf>
  </metadata>
  <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#242424" stroke="none">
    <path stroke-width="80px" stroke="rgba(252,244,217,0.5)" d="M1419 2888 c-46 -17 -109 -39 -139 -49 -30 -11 -64 -23 -75 -28 -11 -5 -33 -14 -50 -19 -16 -6 -82 -29 -145 -53 -63 -23 -137 -50 -165 -60 -27 -10 -88 -32 -135 -49 -47 -17 -99 -36 -115 -41 -25 -7 -44 -31 -110 -146 -44 -76 -84 -145 -90 -154 -5 -10 -30 -53 -55 -96 -25 -43 -49 -86 -55 -95 -181 -310 -226 -394 -220 -418 4 -14 15 -76 26 -138 10 -61 28 -165 40 -230 11 -64 27 -155 34 -202 8 -47 17 -96 20 -110 4 -14 15 -79 26 -145 13 -76 26 -126 37 -138 9 -11 123 -108 252 -215 206 -172 273 -228 406 -342 16 -14 44 -37 63 -52 l34 -28 499 0 500 0 151 127 c84 70 161 135 172 144 11 10 56 48 100 85 135 112 176 147 255 213 41 35 79 67 83 71 5 4 17 58 27 121 11 63 31 179 45 259 15 80 33 181 40 225 31 190 46 273 57 323 12 57 10 65 -56 177 -13 22 -102 177 -199 345 -259 450 -224 403 -331 440 -50 18 -100 36 -111 41 -11 5 -139 52 -285 105 -146 53 -306 111 -356 129 l-90 33 -85 -30z m141 -38 c30 -10 87 -31 125 -45 39 -14 88 -32 110 -40 22 -8 72 -26 110 -40 39 -15 88 -33 110 -40 57 -20 139 -49 220 -80 39 -14 90 -33 115 -42 56 -19 66 -27 91 -72 11 -20 28 -49 38 -66 23 -39 348 -604 386 -672 29 -51 29 -53 18 -125 -14 -84 -41 -239 -78 -448 -15 -80 -33 -183 -41 -230 -7 -47 -19 -112 -26 -144 -14 -64 -16 -66 -208 -226 -30 -25 -86 -72 -125 -105 -38 -33 -149 -127 -247 -208 l-176 -147 -480 0 -479 0 -29 22 c-16 12 -31 25 -34 29 -3 3 -52 45 -110 93 -58 48 -125 104 -148 124 -24 20 -130 109 -235 197 l-190 160 -18 90 c-9 50 -25 135 -34 190 -20 117 -46 264 -74 425 -12 63 -26 147 -32 185 l-12 70 47 78 c25 43 46 80 46 82 0 2 17 32 38 66 22 35 52 87 67 114 109 193 258 449 276 475 11 17 38 32 76 44 32 10 63 22 68 26 6 4 24 10 40 14 17 4 44 13 60 21 17 7 98 37 180 66 83 29 155 56 160 59 6 4 24 10 40 14 17 4 44 13 60 20 17 8 64 26 105 40 41 15 84 31 95 36 28 12 34 12 95 -10z"
    id="node1" class="node" style="fill: rgba(252,244,217,0.2);"></path>
  </g>
  <g transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)" fill="#C6B044" stroke="none">
    <!--<defs>-->
    <!--<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">-->
    <!--<image xlink:href="./img/khoi-259x270.jpg" x="0" y="0" width="259px"-->
    <!--height="270px"/>-->
    <!--</pattern>-->
    <!--</defs>-->
    <path fill="url(#img1)" d="M1465 2860 c-11 -5 -54 -21 -95 -36 -41 -14 -88 -32 -105 -40 -16 -7 -43 -16 -60 -20 -16 -4 -34 -10 -40 -14 -5 -3 -77 -30 -160 -59 -82 -29 -163 -59 -180 -66 -16 -8 -43 -17 -60 -21 -16 -4 -34 -10 -40 -14 -5 -4 -36 -16 -68 -26 -38 -12 -65 -27 -76 -44 -18 -26 -167 -282 -276 -475 -15 -27 -45 -79 -67 -114 -21 -34 -38 -64 -38 -66 0 -2 -21 -39 -46 -82 l-47 -78 12 -70 c6 -38 20 -122 32 -185 28 -161 54 -308 74 -425 9 -55 25 -140 34 -190 l18 -90 190 -160 c105 -88 211 -177 235 -197 23 -20 90 -76 148 -124 58 -48 107 -90 110 -93 3 -4 18 -17 34 -29 l29 -22 479 0 480 0 176 147 c98 81 209 175 247 208 39 33 95 80 125 105 192 160 194 162 208 226 7 32 19 97 26 144 8 47 26 150 41 230 37 209 64 364 78 448 11 72 11 74 -18 125 -38 68 -363 633 -386 672 -10 17 -27 46 -38 66 -25 45 -35 53 -91 72 -25 9 -76 28 -115 42 -81 31 -163 60 -220 80 -22 7 -71 25 -110 40 -38 14 -88 32 -110 40 -22 8 -71 26 -110 40 -178 67 -187 69 -220 55z"
    id="node3" class="node"></path>
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;

我正在寻找有关此问题的帮助，我一直没有运气。 欢迎任何帮助，最好是响应一个，而不必使用javascript。

Answer 1

此答案改编自html/css hexagon with image inside，使用pattern element将形状填充为图像：

svg{width:30%;height:auto;}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon fill="url(#img)" stroke="#333" stroke-width="2" points="50 3.5 79.5 14.5 95.5 42 90 73 66 93.5 34.5 93.5 10 73 5 42 20 15"/>
</svg>