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>
Reference
이 문제에 관하여(svg의 외부 파일을 읽습니다 (img src 및 jQuery load)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ekzemplaro/items/797d04ce4c613267bf72텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
