[英]Insert local SVG image using D3.js
I can easily insert an SVG image using D3.js using an URL, like this: 我可以使用URL通过D3.js轻松插入SVG图像,如下所示:
var img = g.append("svg:image")
.attr("xlink:href", "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg")
.attr("width", 200)
.attr("height", 200)
.attr("x", 228)
.attr("y",53);
However, I have looked everywhere online and tried everything I could think of, I have not been able to do the same using a local image reference (absolute or relative path) and it's driving me crazy. 但是,我在网上无处不在,并尝试了所有我能想到的东西,但是我无法使用本地图像参考 (绝对或相对路径) 来做同样的事情 ,这使我发疯。
my version (working): 我的版本(有效):
CSS: CSS:
iframe {
top: 0;
left: 0;
height: 200px;
width: 200px;
border-width: 0px;
/* background-color: #B0B0B0; */
border: none;
}
JS: JS:
(function () {
// Prevent White Flash While iFrame Loads. Prevent variables from being global.
// 1. Inject CSS which makes iframe invisible
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0]
|| document.getElementsByTagName('script')[0];
div.innerHTML = '­<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
// 2. When window loads, remove that CSS, making iframe visible again
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
HTML: HTML:
<iframe src="image\hour-glass.svg" scrolling="no" align="bottom"></iframe>
可能有用的SO链接Javascript d3从本地文件插入图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.