jquery - 使用 jquery 更改 SVG <image> 标签

Question

我有以下<svg> 。我想做的就是替换 <image> href/source 与其他内容。我试过.each通过.children()使用jquery和(烦人).each 就在 <image> 之前停止由于某种原因标记。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="588" height="799" id="svg_761">
    <desc>Created with Rapha�l</desc>
    <defs></defs>
    <rect x="15" y="150" width="24" height="24" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"></rect>
    <rect x="7" y="174" width="24" height="24" r="0" rx="0" ry="0" fill="#000000" stroke="none"></rect>
    <rect x="7" y="198" width="24" height="24" r="0" rx="0" ry="0" fill="#3f3f3f" stroke="none"></rect>
    <rect x="7" y="222" width="24" height="24" r="0" rx="0" ry="0" fill="#7f7f7f" stroke="none"></rect>
    <rect x="7" y="246" width="24" height="24" r="0" rx="0" ry="0" fill="#bfbfbf" stroke="none"></rect>
    <rect x="7" y="270" width="24" height="24" r="0" rx="0" ry="0" fill="#ff7f00" stroke="none"></rect>
    <rect x="7" y="294" width="24" height="24" r="0" rx="0" ry="0" fill="#ffff00" stroke="none"></rect>
    <rect x="7" y="318" width="24" height="24" r="0" rx="0" ry="0" fill="#00ff00" stroke="none"></rect>
    <rect x="7" y="342" width="24" height="24" r="0" rx="0" ry="0" fill="#00ffff" stroke="none"></rect>
    <rect x="7" y="366" width="24" height="24" r="0" rx="0" ry="0" fill="#007fff" stroke="none"></rect>
    <rect x="7" y="390" width="24" height="24" r="0" rx="0" ry="0" fill="#0000ff" stroke="none"></rect>
    <rect x="7" y="414" width="24" height="24" r="0" rx="0" ry="0" fill="#7f00ff" stroke="none"></rect>
    <rect x="40" y="0" width="524" height="775" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style="opacity: 0;" opacity="0"></rect>
    <rect x="2" y="2" width="30" height="30" r="0" rx="5" ry="5" fill="#1e9dba" stroke="none" fill-opacity="0.5"></rect>
    <path fill="#000000" stroke="none" d="M23.40670875726297,5.421248520434228L20.699708757262968,3.7192485204342276C20.01670875726297,3.2912485204342277,19.11670875726297,3.4972485204342276,18.68570875726297,4.180248520434228L17.61870875726297,5.879248520434228L22.797708757262967,9.131248520434227L23.86570875726297,7.434248520434227C24.294708757262967,6.750248520434226,24.08970875726297,5.849248520434227,23.40670875726297,5.421248520434227ZM8.40270875726297,20.552248520434226L13.58170875726297,23.805248520434226L22.02370875726297,10.367248520434226L16.84170875726297,7.113248520434226L8.402708757262971,20.552248520434226ZM7.611708757262969,24.685248520434225L7.496708757262969,27.740248520434225L10.20070875726297,26.310248520434225L12.71270875726297,24.984248520434225L7.71570875726297,21.844248520434224L7.61170875726297,24.685248520434225Z" transform="  "></path>
    <path fill="#000000" stroke="none" d="M12.2634,50.19476L20.8264,50.19476L16.5444,39.10076L12.2634,50.19476M5.6694,58.647760000000005L5.6694,56.991760000000006L7.7164,56.991760000000006L16.029400000000003,35.31976L18.654400000000003,35.31976L26.982400000000002,56.99176L29.279400000000003,56.99176L29.279400000000003,58.64776L20.794400000000003,58.64776L20.794400000000003,56.99176L23.388400000000004,56.99176L21.435400000000005,51.86676L11.622400000000004,51.86676L9.669400000000005,56.99176L12.232400000000005,56.99176L12.232400000000005,58.64776L5.669400000000006,58.64776"></path>
    <path fill="#000000" stroke="none" d="M24.778,81.419L19.276,75.917L24.777,70.415L21.949,67.58500000000001L16.447000000000003,73.087L10.945000000000004,67.58500000000001L8.117000000000004,70.415L13.618000000000006,75.917L8.116000000000007,81.419L10.946000000000007,84.24799999999999L16.447000000000006,78.746L21.948000000000008,84.24799999999999"></path>
    <path fill="#000000" stroke="none" d="M14.64895,101.42997372689885V99.85097372689886L6.174949999999999,104.74397372689886L14.64895,109.63697372689886V107.94097372689886C16.94895,107.93997372689886,20.984949999999998,108.13697372689886,20.984949999999998,109.52997372689886C20.984949999999998,111.47597372689886,16.768949999999997,112.51397372689885,16.768949999999997,112.51397372689885V114.00597372689886C16.768949999999997,114.00597372689886,26.239949999999997,114.32997372689886,26.239949999999997,107.12997372689885C26.239949999999997,101.47297372689886,18.128949999999996,101.26097372689885,14.648949999999997,101.42997372689885Z" transform="  "></path>
    <rect x="2" y="2" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="32" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="62" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="92" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <image x="35" y="0" width="564" height="775" preserveAspectRatio="none" xlink:href="https://s3.amazonaws.com/lom.user.uploads/62EE2665-F58B-3360-D0A2-5F1C7CAE3694-edit.jpg"></image>
    <path fill="none" stroke="#ff0000" d="M320.6499938964844,78.0999755859375" style="stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

有没有办法“到达”<image>直接使用jquery标记？

Answer 1

$('#svg_761').click(() => {
  $('#svg_761 image').attr('xlink:href', 'https://www.gravatar.com/avatar/11dc61937f8427c4567d353cf50774e6?s=328&d=identicon&r=PG')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="588" height="799" id="svg_761">
    <desc>Created with Rapha�l</desc>
    <defs></defs>
    <rect x="15" y="150" width="24" height="24" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"></rect>
    <rect x="7" y="174" width="24" height="24" r="0" rx="0" ry="0" fill="#000000" stroke="none"></rect>
    <rect x="7" y="198" width="24" height="24" r="0" rx="0" ry="0" fill="#3f3f3f" stroke="none"></rect>
    <rect x="7" y="222" width="24" height="24" r="0" rx="0" ry="0" fill="#7f7f7f" stroke="none"></rect>
    <rect x="7" y="246" width="24" height="24" r="0" rx="0" ry="0" fill="#bfbfbf" stroke="none"></rect>
    <rect x="7" y="270" width="24" height="24" r="0" rx="0" ry="0" fill="#ff7f00" stroke="none"></rect>
    <rect x="7" y="294" width="24" height="24" r="0" rx="0" ry="0" fill="#ffff00" stroke="none"></rect>
    <rect x="7" y="318" width="24" height="24" r="0" rx="0" ry="0" fill="#00ff00" stroke="none"></rect>
    <rect x="7" y="342" width="24" height="24" r="0" rx="0" ry="0" fill="#00ffff" stroke="none"></rect>
    <rect x="7" y="366" width="24" height="24" r="0" rx="0" ry="0" fill="#007fff" stroke="none"></rect>
    <rect x="7" y="390" width="24" height="24" r="0" rx="0" ry="0" fill="#0000ff" stroke="none"></rect>
    <rect x="7" y="414" width="24" height="24" r="0" rx="0" ry="0" fill="#7f00ff" stroke="none"></rect>
    <rect x="40" y="0" width="524" height="775" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style="opacity: 0;" opacity="0"></rect>
    <rect x="2" y="2" width="30" height="30" r="0" rx="5" ry="5" fill="#1e9dba" stroke="none" fill-opacity="0.5"></rect>
    <path fill="#000000" stroke="none" d="M23.40670875726297,5.421248520434228L20.699708757262968,3.7192485204342276C20.01670875726297,3.2912485204342277,19.11670875726297,3.4972485204342276,18.68570875726297,4.180248520434228L17.61870875726297,5.879248520434228L22.797708757262967,9.131248520434227L23.86570875726297,7.434248520434227C24.294708757262967,6.750248520434226,24.08970875726297,5.849248520434227,23.40670875726297,5.421248520434227ZM8.40270875726297,20.552248520434226L13.58170875726297,23.805248520434226L22.02370875726297,10.367248520434226L16.84170875726297,7.113248520434226L8.402708757262971,20.552248520434226ZM7.611708757262969,24.685248520434225L7.496708757262969,27.740248520434225L10.20070875726297,26.310248520434225L12.71270875726297,24.984248520434225L7.71570875726297,21.844248520434224L7.61170875726297,24.685248520434225Z" transform="  "></path>
    <path fill="#000000" stroke="none" d="M12.2634,50.19476L20.8264,50.19476L16.5444,39.10076L12.2634,50.19476M5.6694,58.647760000000005L5.6694,56.991760000000006L7.7164,56.991760000000006L16.029400000000003,35.31976L18.654400000000003,35.31976L26.982400000000002,56.99176L29.279400000000003,56.99176L29.279400000000003,58.64776L20.794400000000003,58.64776L20.794400000000003,56.99176L23.388400000000004,56.99176L21.435400000000005,51.86676L11.622400000000004,51.86676L9.669400000000005,56.99176L12.232400000000005,56.99176L12.232400000000005,58.64776L5.669400000000006,58.64776"></path>
    <path fill="#000000" stroke="none" d="M24.778,81.419L19.276,75.917L24.777,70.415L21.949,67.58500000000001L16.447000000000003,73.087L10.945000000000004,67.58500000000001L8.117000000000004,70.415L13.618000000000006,75.917L8.116000000000007,81.419L10.946000000000007,84.24799999999999L16.447000000000006,78.746L21.948000000000008,84.24799999999999"></path>
    <path fill="#000000" stroke="none" d="M14.64895,101.42997372689885V99.85097372689886L6.174949999999999,104.74397372689886L14.64895,109.63697372689886V107.94097372689886C16.94895,107.93997372689886,20.984949999999998,108.13697372689886,20.984949999999998,109.52997372689886C20.984949999999998,111.47597372689886,16.768949999999997,112.51397372689885,16.768949999999997,112.51397372689885V114.00597372689886C16.768949999999997,114.00597372689886,26.239949999999997,114.32997372689886,26.239949999999997,107.12997372689885C26.239949999999997,101.47297372689886,18.128949999999996,101.26097372689885,14.648949999999997,101.42997372689885Z" transform="  "></path>
    <rect x="2" y="2" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="32" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="62" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <rect x="2" y="92" width="30" height="30" r="0" rx="0" ry="0" fill="#000000" stroke="none" style="fill-opacity: 0;" fill-opacity="0"></rect>
    <image x="35" y="0" width="564" height="775" preserveAspectRatio="none" xlink:href="https://s3.amazonaws.com/lom.user.uploads/62EE2665-F58B-3360-D0A2-5F1C7CAE3694-edit.jpg"></image>
    <path fill="none" stroke="#ff0000" d="M320.6499938964844,78.0999755859375" style="stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>