javascript - 使用 D3.js 插入本地 SVG 图像
问题描述
我可以使用 D3.js 使用 URL 轻松插入 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);
但是,我在网上到处查看并尝试了我能想到的一切,但我无法使用本地图像参考(绝对或相对路径)做同样的事情,这让我发疯。
解决方案
我的版本(工作):
CSS:
iframe {
top: 0;
left: 0;
height: 200px;
width: 200px;
border-width: 0px;
/* background-color: #B0B0B0; */
border: none;
}
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:
<iframe src="image\hour-glass.svg" scrolling="no" align="bottom"></iframe>
推荐阅读
- angular - 如何在几个部分中制作表格,以便它们一个接一个
- azure - 为什么在准备 Linux VM 部署的 SSL 证书时,“az vm secret format”命令会失败?
- excel - 删除重复行,保留最后并首先删除
- wordpress - 在 wordpress 中添加第二个导航菜单
- c# - 如何使用 Dynamics 365 XRM Tooling SDK 按主 ID 一般获取枚举的实体记录集
- mysql - 这是我可以使用的最规范化的数据库实体图吗?
- php - WordPress帖子编号在分页中不起作用
- java-8 - TimeZoneConversion - CST 到 UTC
- c - 如何在c中的字符串数组中排列逗号分隔的字符串?
- python - 不编码熊猫的特殊字符