如何在页面中嵌入并显示SVG图像

SVG图像可以用JavaScript操作，实现一些复杂的图形界面交互。


欲实现功能：
  1   假设我在活字格服务管理器那台电脑上有一个 SVG图像文件。
  2   活字格页面上我已经选择了一个区域命名为 svgbox ，我要在这区域里显示这个SVG图像。


遇到问题：
  1  用 <embed> 标签嵌入SVG文件不成功。按照http://www.w3school.com.cn/svg/svg_inhtml.asp 的教程，如果是在HTML页面里直接贴上SVG图片代码就可以绘出图像，
但在活字格里就不知道如何引用了。

1. $("[fgcname=svgbox]").empty();
   
2. $("[fgcname=svgbox]").append("<embed src="/Resources/userfile/qqqq.svg" width="300" height="100"
   
3. type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />");
   
4. var svg1 = document.getElementById('svgbox')

复制代码

1. 
   

复制代码

你把你的SVG文件发上来，或者随便给我一个能让我测试SVG文件。
你这把文件放到你的D盘，我没有啊

Simon.hu 发表于 2018-8-29 16:32
你把你的SVG文件发上来，或者随便给我一个能让我测试SVG文件。
你这把文件放到你的D盘，我没有啊

已经上传到付件。

就像你之前做的百度地图纯代码的demo，几行代码就说清楚了地图如何嵌入到活字格页面上。起到抛砖引玉的作用，很有帮助，后面的我们就自己看百度地图API实现了很多功能。

1. var p=Forguncy.Page;//获取当前页面
   
2. var element=$("[fgcname='chart']")[0];
   
3. var map = new BMap.Map(element);    // 创建Map实例
   
4. var local = new BMap.LocalSearch(map, {
   
5.   renderOptions:{map: map, autoViewport:true}
   
6. });

复制代码

daxin180 发表于 2018-8-29 17:52
已经上传到付件。

就像你之前做的百度地图纯代码的demo，几行代码就说清楚了地图如何嵌入到活字格页面 ...

活字格的图片上传本身就是支持SVG图像的。请参考附件

Eric.Liang 发表于 2018-8-30 11:42
活字格的图片上传本身就是支持SVG图像的。请参考附件

这附件跟我的问题好像一点关系都没有，而且 图片类型的单元格也不支持导入SVG格式

daxin180 发表于 2018-8-30 12:08
这附件跟我的问题好像一点关系都没有，而且 图片类型的单元格也不支持导入SVG格式

附件比较多，上传错了，附件已重新上传。不过图片上传类型的单元格是支持上传svg格式图像的，图片类型的单元格只是展示用的。

Eric.Liang 发表于 2018-8-30 12:21
附件比较多，上传错了，附件已重新上传。不过图片上传类型的单元格是支持上传svg格式图像的，图片类型的 ...

谢谢梁总的回答。

可能你没理解我得意思。 我不是想上传SVG图片文件到服务器。

我是想在活字格页面上显示SVG图片，而这个图片是我用SVG绘图软件画好了的。

如果能在活字格页面里显示，那我下一步就可以编代码控制这个SVG图像。
我已经更新了附件，哪位大侠引导一下，谢谢！

daxin180 发表于 2018-8-31 19:09
谢谢梁总的回答。

可能你没理解我得意思。 我不是想上传SVG图片文件到服务器。

你绘制好的SVG图像如果想在活字格中预览有3种方式。
1.通过活字格的图片上传功能上传到活字格服务器中。
2.将你的SVG图片挂到外网上，将对应的外网访问链接赋值给图片单元格即可预览。
3.通过代码将你的SVG图像转化为base64位的流，赋值给图片单元格预览。

鉴于我不知道你想控制SVG图像干嘛，目前只能给你相应的建议。

Eric.Liang 发表于 2018-9-3 10:01
你绘制好的SVG图像如果想在活字格中预览有3种方式。
1.通过活字格的图片上传功能上传到活字格服务器中。 ...

我看了论坛里的帖子，做了测试。
使用设置图片单元格的样式的背影图的方法可以展示SVG图片

1. $("#r0c0p").css("background-image", "url('/Resources/UserFile/qqqq.svg')");

复制代码

但是也只是显示而已，不能以SVG图片作为页面对象而对SVG图片里的图元进行控制。

对SVG图片里的图元进行控制，这个功能在有些场合很有用。比如调度管理系统，要图形化显示各个环节的实时数据。

daxin180 发表于 2018-9-3 12:42
我看了论坛里的帖子，做了测试。
使用设置图片单元格的样式的背影图的方法可以展示SVG图片

1.我不太懂你为什么要使用JS代码。我给你做的demo里已经很清楚了，你把本地的svg图片链接赋值给图片类型的单元格就能预览展示。
2.你说的SVG图片中的图元进行控制指的是可以在浏览器里操作每一个图元？浏览器本身就是不支持的吧？