Posted at

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

More than 1 year has passed since last update.

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

実行結果

Chrome


chrome_may13.png


Firefox


firefox_may13.png



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>