javascript - 如何在 XML 代码中将图像直接添加到 SVG

Question

我的图像有以下 SVG XML 代码: FIDDLE HERE

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 531 465" style="enable-background:new 0 0 531 465;" xml:space="preserve">
                <style type="text/css">
                    .st0{fill:#FFC21F;}
                    /* .st1{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
                        .st2{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.8732,2.9239;}
                        .st3{stroke:#000000;stroke-miterlimit:10;} */



                    /* .st4{fill:#FFC21F;stroke:#000000;stroke-miterlimit:10;}
                    .st5{fill:#010101;}
                    .st6{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;}
                    .st7{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:1.024170e-002,0;}
                    .st8{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:5.1209,3.0623,1.024170e-002,0;} */



                    /* .st9{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:9.950495e-003,0;}
                     .st10{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.9752,2.9752,9.950495e-003,0;} */ 




                    .st11{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:9.793314e-003,0;}
                    .st12{fill:none;stroke:#FFC21F;stroke-width:3;stroke-miterlimit:10;stroke-dasharray:4.8967,2.9282,9.793314e-003,0;}
                    /* .st13{font-family:'OpenSans-Bold';} */
                    .st14{font-size:13px;}
                    .st15{font-size:11px;}
                    .st16{font-size:10px;}
                    #dotted-lines {
                      stroke: url(#black-gradient);
                      fill: none;
                      stroke-width:3;
                      stroke-miterlimit: 10;
                      stroke-dasharray:4.8732,2.9239;
                    }
                    #dotted-lines-1 line , #dotted-lines-1 path {
                        stroke: url(#yellow-gradient);
                        fill: none;
                        stroke-width:3;
                        stroke-miterlimit: 10;
                        stroke-dasharray:4.8732,2.9239;
                    }

                    #dotted-lines-2 line , #dotted-lines-2 path{
                        stroke: url(#yellow-gradient);
                        fill: none;
                        stroke-width:3;
                        stroke-miterlimit: 10;
                        stroke-dasharray:4.8732,2.9239;
                    }
                </style>
                <defs>
                  <linearGradient id="black-gradient">
                    <stop offset="0%" id="move-opacity" stop-opacity="1" stop-color="black" />
                    <stop offset="0%" id="last-opacity" stop-opacity="0" stop-color="black" />
                  </linearGradient>
                </defs>
                <defs>
                  <linearGradient id="yellow-gradient">
                    <stop offset="100%" id="move-opacity-1" stop-opacity="0" stop-color="#ffde17" />
                    <stop offset="100%" id="last-opacity-1" stop-opacity="1" stop-color="#ffde17" />
                  </linearGradient>
                </defs>


                <path id="lock-icon-circle" d="M279.9,19.2h-38c-6.6,0-12,5.4-12,12v81c0,6.6,5.4,12,12,12h38c6.6,0,12-5.4,12-12v-81
                    C291.9,24.6,286.5,19.2,279.9,19.2z M253.7,30.2h13.7c0.5,0,0.8,0.4,0.8,0.8c0,0.5-0.4,0.8-0.8,0.8h-13.7c-0.5,0-0.8-0.4-0.8-0.8
                    C252.9,30.6,253.3,30.2,253.7,30.2z M260.6,120c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2c3.4,0,6.2,2.8,6.2,6.2S264,120,260.6,120z
                     M285.9,97.9c0,2.8-2.3,5-5,5h-39.3c-2.8,0-5-2.3-5-5v-52c0-2.8,2.3-5,5-5h39.3c2.8,0,5,2.3,5,5V97.9z"/>
                <path id="lock" class="st0" d="M255.1,70.3H266v-4.1c0-1.5-0.5-2.8-1.6-3.8c-1.1-1.1-2.3-1.6-3.8-1.6s-2.8,0.5-3.8,1.6
                    c-1.1,1.1-1.6,2.3-1.6,3.8V70.3L255.1,70.3z M272.8,72.3v12.3c0,0.6-0.2,1-0.6,1.4c-0.4,0.4-0.9,0.6-1.4,0.6h-20.4
                    c-0.6,0-1-0.2-1.4-0.6c-0.4-0.4-0.6-0.9-0.6-1.4V72.3c0-0.6,0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.4-0.6h0.7v-4.1c0-2.6,0.9-4.8,2.8-6.7
                    c1.9-1.9,4.1-2.8,6.7-2.8s4.8,0.9,6.7,2.8c1.9,1.9,2.8,4.1,2.8,6.7v4.1h0.7c0.6,0,1,0.2,1.4,0.6C272.6,71.3,272.8,71.7,272.8,72.3
                    L272.8,72.3z"/>
                <g id="dotted-lines" >
                    <g id="XMLID_458_">
                        <path id="XMLID_461_" class="st1" d="M288.9,129.4c0,0,0.8,0.5,2.2,1.1"/>
                        <path id="XMLID_460_" class="st2" d="M293.9,131.5c8.1,2.4,24.6,3.1,38-23.9c18.5-37.3,11-49.4,43.3-52.4c0,0,14.3,1.8,22.9,5.7"
                            />
                        <path id="XMLID_459_" class="st1" d="M399.4,61.6c0.8,0.4,1.5,0.9,2.1,1.3"/>
                    </g>
                </g>
                <polyline id="XMLID_431_" class="st1" points="406.6,56.9 408.4,67.7 397,69.8 "/>
                <circle id="XMLID_432_" class="st3" cx="461.9" cy="71.9" r="38.5"/>
                <path id="XMLID_433_" class="st4" d="M467.9,83.6h-12c-2.8,0-5-2.3-5-5V67.5c0-2.8,2.3-5,5-5h12c2.8,0,5,2.3,5,5v11.1
                    C472.9,81.3,470.6,83.6,467.9,83.6z"/>
                <path id="XMLID_440_" class="st5" d="M455.1,76.4v3.5h3.5l8.2-8.2l-3.5-3.5L455.1,76.4z M458.2,78.7h-0.7v-1.2h-1.2v-0.7l1.4-1.4
                    l1.9,1.9L458.2,78.7z M463.5,70.3l-4.3,4.3c-0.1,0.1-0.3,0.1-0.4,0c-0.1-0.1-0.1-0.3,0-0.4l4.3-4.3c0.1-0.1,0.3-0.1,0.4,0
                    C463.7,70,463.7,70.2,463.5,70.3z"/>
                <path id="XMLID_434_" class="st5" d="M469.1,68.9c0-0.3-0.1-0.6-0.3-0.8l-1.9-1.9c-0.2-0.2-0.5-0.3-0.8-0.3s-0.6,0.1-0.8,0.3
                    l-1.1,1.1l3.5,3.5l1.1-1.1l0,0C469,69.5,469.1,69.3,469.1,68.9z"/>
                <g id="dotted-lines-1">
                    <g id="XMLID_476_">
                        <path id="XMLID_482_" class="st6" d="M433.6,125.5c0,0-0.3,0.8-0.9,2.3"/>
                        <line id="XMLID_481_" class="st7" x1="431.4" y1="130.6" x2="431.4" y2="130.6"/>
                        <path id="XMLID_480_" class="st8" d="M431.4,130.6c-6.4,13.2-28,48.4-80.5,60.5c0,0-30.9,6.2-51.2,4.1"/>
                        <path id="XMLID_479_" class="st6" d="M299.6,195.3c-0.8-0.1-1.7-0.2-2.5-0.3"/>
                        <g id="XMLID_477_">
                            <polygon id="XMLID_478_" class="st0" points="308.4,183.7 310.2,186.1 298.3,194.9 307.9,206.1 305.7,208.1 293.9,194.4            "/>
                        </g>
                    </g>
                </g>
                <circle id="quote-icon-circle" class="st0" cx="260.3" cy="184" r="24.1"/>
                <path id="quote-icon" class="st5" d="M261.2,189.2l0-6.8c0-0.7,0.1-1.3,0.4-1.9c0.3-0.6,0.6-1.1,1.1-1.6c0.4-0.4,1-0.8,1.6-1
                    c0.6-0.3,1.2-0.4,1.9-0.4l0.6,0c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4l0,1.2c0,0.2-0.1,0.3-0.2,0.4
                    c-0.1,0.1-0.3,0.2-0.4,0.2l-0.6,0c-0.7,0-1.3,0.2-1.7,0.7s-0.7,1.1-0.7,1.7l0,0.3c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.3l2.1,0
                    c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3l0,3.7c0,0.5-0.2,0.9-0.5,1.3s-0.8,0.5-1.3,0.5l-3.7,0c-0.5,0-0.9-0.2-1.3-0.5
                    S261.2,189.7,261.2,189.2L261.2,189.2z M252.6,189.1l0-6.8c0-0.7,0.1-1.3,0.4-1.9c0.3-0.6,0.6-1.1,1.1-1.6c0.4-0.4,1-0.8,1.6-1
                    c0.6-0.3,1.2-0.4,1.9-0.4l0.6,0c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4l0,1.2c0,0.2-0.1,0.3-0.2,0.4s-0.3,0.2-0.4,0.2
                    l-0.6,0c-0.7,0-1.3,0.2-1.7,0.7c-0.5,0.5-0.7,1.1-0.7,1.7l0,0.3c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.3l2.1,0c0.5,0,0.9,0.2,1.3,0.5
                    c0.4,0.4,0.5,0.8,0.5,1.3l0,3.7c0,0.5-0.2,0.9-0.5,1.3s-0.8,0.5-1.3,0.5l-3.7,0c-0.5,0-0.9-0.2-1.3-0.5
                    C252.8,190.1,252.6,189.6,252.6,189.1L252.6,189.1z"/>
                <g id="dotted-lines-2">
                    <g id="XMLID_489_">
                        <path id="XMLID_495_" class="st6" d="M221.6,183.2c0,0-0.6-0.7-1.7-1.9"/>
                        <line id="XMLID_494_" class="st9" x1="217.9" y1="179.2" x2="217.9" y2="179.2"/>
                        <path id="XMLID_493_" class="st10" d="M217.9,179.2c-12.4-12.6-54.1-49.2-103.1-24.3c0,0-18.9,7.6-43.2,53"/>
                        <path id="XMLID_492_" class="st6" d="M71.6,208c-0.4,0.7-0.8,1.5-1.2,2.2"/>
                        <g id="XMLID_490_">
                            <polygon id="XMLID_491_" class="st0" points="64.3,195.7 67.2,194.9 71,209.2 85,204.4 85.9,207.2 68.9,213.1"/>
                        </g>
                    </g>
                </g>
                <ellipse id="XMLID_445_" class="st0" cx="72.9" cy="267" rx="47" ry="44.6"/>
                <g id="XMLID_447_">
                    <g id="XMLID_499_">
                        <path id="XMLID_505_" class="st6" d="M123.4,274.6c0,0,0.8-0.3,2.3-0.8"/>
                        <line id="XMLID_504_" class="st11" x1="128.5" y1="272.9" x2="128.5" y2="272.9"/>
                        <path id="XMLID_503_" class="st12" d="M128.5,272.9c13.6-4.1,51.6-12.5,86,9c0,0,30.3,19,41.7,61.1"/>
                        <path id="XMLID_502_" class="st6" d="M256.2,343c0.2,0.8,0.4,1.6,0.6,2.4"/>
                        <g id="XMLID_500_">
                            <polygon id="XMLID_501_" class="st0" points="242.2,339.1 243.8,336.5 256.4,344.3 263.3,331.2 265.9,332.6 257.6,348.6            "/>
                        </g>
                    </g>
                </g>
                <circle id="XMLID_446_" class="st0" cx="262" cy="377.4" r="23.7"/>
                <text id="XMLID_462_" transform="matrix(1 0 0 1 236.263 140.8998)" class="st13 st14">Sign Up</text>
                <text id="XMLID_463_" transform="matrix(1 0 0 1 227.1194 227.1566)"><tspan x="0" y="0" class="st13 st15">Reveive and</tspan><tspan x="-7.7" y="13.2" class="st13 st15">Review Quotes</tspan></text>
                <text id="XMLID_464_" transform="matrix(1 0 0 1 28.1688 333.8998)" class="st13 st16">Award &amp; Fund Job</text>
                <text id="XMLID_465_" transform="matrix(1 0 0 1 169.2459 426.3998)"><tspan x="0" y="0" class="st13 st16">Khalaas - receive service &amp; pay upon</tspan><tspan x="61.9" y="12" class="st13 st16">completion</tspan></text>
                </svg>

现在我真的很想在下面的空黄色圆圈(其中任何一个)中添加一个万事达卡图标，图片 HERE ，那么如何将普通静态图像添加到 SVG 中呢？我希望这个正常的静态图像以圆为中心。所以我的问题确实是，如何在 XML 代码中直接将普通图像添加到 SVG？

Answer 1

很简单:).

<image xlink:href="https://pbs.twimg.com/profile_images/960696059/PIC_logo.jpg" x="100" y="100" height="50px" width="50px"/> <br>

只需根据需要设置 x 和 y。