svg の外部ファイルを読み込む　(img src と jQuery load) #jQuery

svg の　外部ファイルを、 img src と jQuery load で読み込んでみました。

実行結果

Chrome

Firefox

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="signal.js"></script>
<title>Read SVG</title>
</head>
<body>
<h2>Read SVG</h2>
<span><img src="./circle_red.svg"></span>
<span><img src="./circle_yellow.svg"></span>
<span><img src="./circle_green.svg"></span>
<p />

<span id="area_red"></span>
<span id="area_yellow"></span>
<span id="area_green"></span>
<p />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />

<hr />
Version May/12/2018 PM 19:11<p />
</body>
</html>

signal.js

// -------------------------------------------------------------------------
//  signal.js
//
//                      May/12/2018
// -------------------------------------------------------------------------
jQuery  (function ()
{
    jQuery("#outarea_aa").text("*** signal.js *** start ***")

    const colors = ["green","yellow","red"]

    colors.forEach(function (color)
        {
        const area = "#area_" + color
        const file_svg = "circle_" + color + ".svg"
        jQuery(area).load(file_svg, function()
            {
            jQuery("#outarea_bb").text("*** done ***")
            })
        })

    jQuery("#outarea_hh").text("*** end ***")
})

// -------------------------------------------------------------------------

circle_red.svg

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>

circle_yellow.svg

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="yellow" />
</svg>

circle_green.svg

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="green" />
</svg>

svg の外部ファイルを読み込む (img src と jQuery load)

svg の外部ファイルを読み込む　(img src と jQuery load)