將圖像添加到SVG圈子

Question

我正在嘗試將一些背景圖像添加到SVG節點“circle”。

我已經閱讀了很多stackoverflow的答案，每個人都說我們需要在一個節點中添加一個節點來定義我們的圖像。

我嘗試了這個，但我的圖像根本沒有顯示。

這是我的代碼的小提琴： https ： //jsfiddle.net/baapu6wz/ 。

我錯過了什么 ？

<svg baseProfile="full" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="390" width="1629">
<g transform="translate(40,0)">
    <g>
        <line y2="149.3060251652327" x2="819.8567597731511" y1="222.22245513917517" x1="854.7332277213098" style="stroke: #999;" stroke-width="5"></line>
        <line y2="213.47136779636722" x2="768.9096407109324" y1="213.47136779636722" x1="768.9096407109324" style="stroke: #999;" stroke-width="5"></line>
        <line y2="213.47136779636722" x2="768.9096407109324" y1="149.3060251652327" x1="819.8567597731511" style="stroke: #999;" stroke-width="5"></line>
    </g>
    <g>
        <g transform="translate(854.7332277213098, 222.22245513917517)">
            <circle fill="url(#image1);" fillOpacity="0.5" r="16"></circle>
            <text x="20" dy="3">pagx</text>
        </g>
        <g transform="translate(768.9096407109324, 213.47136779636722)">
            <circle fill="url(#image1);" fillOpacity="0.5" r="10"></circle>
            <text x="20" dy="3">xzreds</text>
        </g>
        <g transform="translate(819.8567597731511, 149.3060251652327)">
            <circle fill="url(#image1);" fillOpacity="0.5" r="14"></circle>
            <text x="20" dy="3">jzkcwv</text>
        </g>
    </g>
</g>
<defs>
    <pattern width="16" height="16" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
        <image xlink:href="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="16" width="16" y="0" x="0"></image>
    </pattern>
</defs>

Answer 1

你有一個錯字。

fill="url(#image1);"

應該

fill="url(#image1)"

刪除分號。

https://jsfiddle.net/baapu6wz/1/