javascript - 使用 javascript 和一些跨浏览器支持向 svg 添加内容
问题描述
我正在尝试将一个元素添加到一个已经存在的 svg 文件中,它在 chrome 和 firefox 上运行良好。当我在边缘尝试时,它似乎没有做任何事情,我所需要的只是让它在三个浏览器的最新版本上工作,但更多总是更好。
这就是它在 html 中声明的方式
<object data="images/svg/MYSVG.svg" type="image/svg+xml" id="svg-object" onload="loadOnClick()"></object>
在我的 loadOnClick 调用中,我尝试像这样向它添加一个元素
var svgObject = document.getElementById('svg-object');
var svgDoc = svgObject.contentDocument;
var tiptext = svgDoc.getElementById('ToolTipText');
let gs = svgDoc.getElementsByTagName('g');
gs[1].innerHTML += '<foreignObject id="homeButton" width="20" height="20" x="10px" y="10px"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" fill:#000000;"><a xlink:href="MYOTHERSVG.svg"><path fill="#124A92" d="M7.9,256C7.9,119,119,7.9,256,7.9C393,7.9,504.1,119,504.1,256c0,137-111.1,248.1-248.1,248.1C119,504.1,7.9,393,7.9,256z"></path><path fill="#FFF" d="M408.1,206.8l-150.1-74.9c-1.3-0.6-2.7-0.6-4,0l-150.2,74.9c-1.7,0.8-2.7,2.4-2.7,4.3v29.6c0,1.6,0.8,3.1,2.2,4c1.4,0.9,3.1,1,4.5,0.3l148.2-74l148.1,74c0.6,0.3,1.3,0.5,2,0.5c0.9,0,1.8-0.2,2.5-0.7c1.4-0.9,2.2-2.4,2.2-4V211C410.8,209.2,409.8,207.5,408.1,206.8z"></path><path fill="#FFF" d="M380.5 245.8L256 183.8 131.5 245.8 131.5 360.8 200.5 360.8 200.5 272.6 248 272.6 248 360.8 380.5 360.8z"></path><path fill="#124A92" d="M263.7 272.6H295.7V304.6H263.7z"></path></a></svg></foreignObject>';
同样,我不确定为什么它似乎无法在边缘工作,但如果您有任何想法,请告诉我!
解决方案
尝试在 foreignObject 元素中添加一个 Div 标签,如下所示:
<foreignObject id="homeButton" width="20" height="20" x="20" y="20">
<div xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" widdth:30px; height:30px; fill:#000000;">
<a xlink:href="MYOTHERSVG.svg">
<path fill="#124A92" d="M7.9,256C7.9,119,119,7.9,256,7.9C393,7.9,504.1,119,504.1,256c0,137-111.1,248.1-248.1,248.1C119,504.1,7.9,393,7.9,256z"></path>
<path fill="#FFF" d="M408.1,206.8l-150.1-74.9c-1.3-0.6-2.7-0.6-4,0l-150.2,74.9c-1.7,0.8-2.7,2.4-2.7,4.3v29.6c0,1.6,0.8,3.1,2.2,4c1.4,0.9,3.1,1,4.5,0.3l148.2-74l148.1,74c0.6,0.3,1.3,0.5,2,0.5c0.9,0,1.8-0.2,2.5-0.7c1.4-0.9,2.2-2.4,2.2-4V211C410.8,209.2,409.8,207.5,408.1,206.8z"></path>
<path fill="#FFF" d="M380.5 245.8L256 183.8 131.5 245.8 131.5 360.8 200.5 360.8 200.5 272.6 248 272.6 248 360.8 380.5 360.8z"></path>
<path fill="#124A92" d="M263.7 272.6H295.7V304.6H263.7z"></path>
</a>
</svg>
</div>
</foreignObject>
[注意] 内部 div 应该有 xmlns 属性:xmlns="http://www.w3.org/1999/xhtml"
更多详细信息,请参考以下示例代码:
<object data="Images/test.svg" type="image/svg+xml" id="svg-object"></object>
SVG 内容:
<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-object" width="800" height="800" onload="loadOnClick()">
<script type="text/ecmascript">
<![CDATA[
function changeRectColor(evt) {
var red = Math.round(Math.random() * 255);
var green = Math.round(Math.random() * 255);
var blue = Math.round(Math.random() * 255);
evt.target.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
}
function loadOnClick() {
console.log("hello");
var svgObject = document.getElementById('svg-object');
var svgDoc = svgObject.contentDocument;
let gs = svgObject.getElementsByTagName('g');
gs[1].innerHTML += '<foreignObject id="homeButton" width="20" height="20" x="200" y="200"><div xmlns="http://www.w3.org/1999/xhtml"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" fill:#000000;"><a xlink:href="MYOTHERSVG.svg"><path fill="#124A92" d="M7.9,256C7.9,119,119,7.9,256,7.9C393,7.9,504.1,119,504.1,256c0,137-111.1,248.1-248.1,248.1C119,504.1,7.9,393,7.9,256z"></path><path fill="#FFF" d="M408.1,206.8l-150.1-74.9c-1.3-0.6-2.7-0.6-4,0l-150.2,74.9c-1.7,0.8-2.7,2.4-2.7,4.3v29.6c0,1.6,0.8,3.1,2.2,4c1.4,0.9,3.1,1,4.5,0.3l148.2-74l148.1,74c0.6,0.3,1.3,0.5,2,0.5c0.9,0,1.8-0.2,2.5-0.7c1.4-0.9,2.2-2.4,2.2-4V211C410.8,209.2,409.8,207.5,408.1,206.8z"></path><path fill="#FFF" d="M380.5 245.8L256 183.8 131.5 245.8 131.5 360.8 200.5 360.8 200.5 272.6 248 272.6 248 360.8 380.5 360.8z"></path><path fill="#124A92" d="M263.7 272.6H295.7V304.6H263.7z"></path></a></svg></div></foreignObject>';
}
]]>
</script>
<g id="firstGroup">
<rect id="myBlueRect" width="200" height="150" x="120" y="40" fill="blue" onclick="changeRectColor(evt)" />
<text x="120" y="40" font-size="13px">Click on rectangle to change it's color.</text>
<foreignObject id="homeButton" width="20" height="20" x="20" y="20">
<div xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style=" widdth:30px; height:30px; fill:#000000;">
<a xlink:href="MYOTHERSVG.svg">
<path fill="#124A92" d="M7.9,256C7.9,119,119,7.9,256,7.9C393,7.9,504.1,119,504.1,256c0,137-111.1,248.1-248.1,248.1C119,504.1,7.9,393,7.9,256z"></path>
<path fill="#FFF" d="M408.1,206.8l-150.1-74.9c-1.3-0.6-2.7-0.6-4,0l-150.2,74.9c-1.7,0.8-2.7,2.4-2.7,4.3v29.6c0,1.6,0.8,3.1,2.2,4c1.4,0.9,3.1,1,4.5,0.3l148.2-74l148.1,74c0.6,0.3,1.3,0.5,2,0.5c0.9,0,1.8-0.2,2.5-0.7c1.4-0.9,2.2-2.4,2.2-4V211C410.8,209.2,409.8,207.5,408.1,206.8z"></path>
<path fill="#FFF" d="M380.5 245.8L256 183.8 131.5 245.8 131.5 360.8 200.5 360.8 200.5 272.6 248 272.6 248 360.8 380.5 360.8z"></path>
<path fill="#124A92" d="M263.7 272.6H295.7V304.6H263.7z"></path>
</a>
</svg>
</div>
</foreignObject>
</g>
<g id="secondGroup">
<rect id="myBlueRect" width="200" height="150" x="220" y="220" fill="blue" onclick="changeRectColor(evt)" />
<text x="220" y="220" font-size="13px">Click on rectangle to change it's color.</text>
</g>
</svg>
结果如下(使用 Microsoft Edge 44.18362.1.0 版本):
推荐阅读
- c# - Docker.Dotnet 如何拉取镜像
- javascript - 无法使用@ViewChild Angular 7将数据从子级传递给父级
- arrays - 如何循环遍历数组中的对象以计算 VueJS 中的元素?
- vue.js - Vue:2个组件递归调用的问题
- javascript - 调试使用 tsc 从本地链接节点包编译的 Typescript
- javascript - JQuery - 使用 css 类和 .each 循环从输入中禁用错误并重置值
- docker - 创建自定义文件夹并分配用户权限
- android - AndroidX 安装后编译出错
- c# - 我需要向已添加的 eBay 沙盒用户添加项目(产品)列表并显示该列表
- java - 如何迁移具有用户定义数据类型的数据库(从 MSSQL Server 到 MySQL)