`
ynp
  • 浏览: 438361 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

svg插入中文名称的图片解决方案

阅读更多
svg插入中文名称的图片解决方案
种种原因吧 ,程序中用了中文名称的图片,嵌入svg中,因为确实不能把这些图片搞成英文名称了,只好找个解决方案绕过去。
网上说可以改tomcat的server.xml配置 加入URIEncoding="UTF-8" ,如下
<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" URIEncoding="UTF-8"/>
这样写 直接访问http://localhost:8080/svgtest/bmp/按钮.png 倒是可以显示了,但svg中的图片还是不能显示。

解决方法:对中文名称进行encodeURI转码才行;
<?xml version="1.0" encoding="utf-8" standalone="no" ?>
<svg id="svgRoot" onload="init()" xmlns="http://www.w3.org/2000/svg" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
	<title>标题</title>
	<desc>SVG</desc>
	<script><![CDATA[
		function init(){
	  		var svgDoc = evt.target.ownerDocument;
	  		var root = svgDoc.documentElement; 
	  	    var imgs = root.getElementsByTagName("image");
	  	    for(var i=0;i<imgs.length;i++){
		  		var xlinkns = "http://www.w3.org/1999/xlink";
		  		var oldImg = imgs.item(i).getAttribute("xlink:href");//不要写成imgs[i]
		  		imgs.item(i).setAttributeNS(xlinkns,"xlink:href",encodeURI(oldImg)); 	  	    
	  	    }
	  		/*
	  		var img1 = root.getElementById("img1");
	  		var xlinkns = "http://www.w3.org/1999/xlink";
	  		var oldImg = img1.getAttribute("xlink:href");
	  		img1.setAttributeNS(xlinkns,"xlink:href",encodeURI(oldImg)); 
	  		*/

	  		//alert(imgs.item(0).getAttribute("xlink:href"));
		}
	 ]]></script>
	<image x="100" y="100" width="100" height="100" xlink:href="../bmp/anniu.png"/>
	<image id="img1" x="100" y="200" width="100" height="100" xlink:href="../bmp/按钮.png"/>
	<!--
	<image x="100" y="300" width="100" height="100" xlink:href="../bmp/%E6%8C%89%E9%92%AE.png"/>
	-->
</svg>

还有一点值得注意,就是遍历数组的时候不要写成xx[i],而应该写成item(i),网上竟然查到有人说getElementsByTagName方法是 svgviwer ie插件的bug(%>_<%),感谢武汉的小鱼帮忙。

=========
今天又测了下,确实必须修改tomcat的server.xml配置, 加入URIEncoding="UTF-8".
注意清除IE缓存
分享到:
评论

相关推荐

    svg-icons:开源图标包,优化,发布到 NPM

    `svg-icons`项目就是针对这一需求的一个解决方案,它是一个开源的图标包,通过优化并发布到NPM(Node Package Manager),为开发者提供了便利。NPM是JavaScript社区中最广泛使用的包管理器,它允许开发者共享和复用...

    noorye:微小的SVG图表生成器

    "努里",可能是开发者的昵称或者项目的名字,这个微小的SVG图表生成器的核心目标是提供一个简洁且高效的解决方案,用于快速生成各种类型的图表,如条形图、折线图、饼图等。开发者可以通过简单的API调用来实现图表的...

    ZPL 打印条码、二维码及小票(中文/汉字),生成条码、二维码图片【Asp.Net】

    总结,利用ZPL和Asp.Net,我们可以构建高效且可定制的条码、二维码和小票打印解决方案,尤其在处理中文/汉字时,需要深入理解ZPL的编码规则和字符集配置,以确保信息的准确无误。通过熟练掌握这些技术,IT专业人员...

    ng-svg-sprite-icon-system

    “ng-svg-sprite-icon-system”是一个专门针对Angular框架的SVG精灵图标解决方案。这个开源项目旨在提供一种简便、高效的方式来管理和使用SVG图标。其核心思想是将SVG图标编译为一个Sprite文件,并通过Angular服务和...

    ng-nest-icon:svg图标

    在现代Web开发中,SVG(可缩放矢量图形)图标由于其优秀的可伸缩性、高清晰度和小体积,已经成为前端开发者首选的图标解决方案。而ng-nest-icon则是这个领域的优秀实践,它为Angular应用提供了一种优雅的方式来管理...

    解决Vue2.0中使用less给元素添加背景图片出现的问题

    本文将详细解析这个问题的成因,并提供正确的解决方案。 首先,我们需要理解Less是一种预处理器,它允许我们使用变量、嵌套规则、运算符等特性来编写CSS。在尝试将Less与Vue.js结合使用时,可能会遇到以下几种错误...

    VUE聊天室表情包资源

    "VUE聊天室表情包资源"这个项目就是针对这一需求提供的一套完整的解决方案,特别是对于那些使用Vue.js作为主要开发框架的开发者来说。Vue.js是一个流行的JavaScript框架,它简化了构建用户界面的工作,而聊天室中的...

    前端开源库-gulp-iconfont

    在Web开发中,图标字体是一种高效、灵活的图标解决方案,可以实现响应式设计,并且能够方便地进行颜色和大小的调整。通过使用 **gulp-iconfont**,你可以将多个SVG图标整合到一个单一的字体文件中,便于管理和在项目...

    前端项目-simple-icons.zip

    《前端项目:Simple Icons深度解析》 在前端开发中,图标是不可或缺的元素,它们能够以直观、简洁的方式传达信息,提升用户...无论你是前端新手还是经验丰富的开发者,Simple Icons都是一个值得信赖的图标解决方案。

    ueditor不在vue项目中使用。加上公式插件和自定义按钮

    【ueditor】是一款非常流行的富文本编辑器,它在网页应用中被广泛使用,提供了丰富的文本格式化功能,包括插入图片、...在实际工作中,这样的自定义编辑器解决方案对于提升用户交互体验和满足业务需求具有重要意义。

    PDF生成工具(Javascript)

    PDF生成工具是利用JavaScript技术来创建PDF文档的解决方案。在网页端,用户可以通过这样的工具将网页内容、数据或设计转化为可下载的PDF格式,便于打印、分享或离线阅读。以下我们将深入探讨JavaScript生成PDF的相关...

    CSS3.0中文完全参考手册-chm版

    Flexbox(弹性盒子)和Grid(网格布局)提供了更为灵活的二维布局解决方案,适应不同屏幕尺寸和设备。 **四、边框与背景** CSS3允许更丰富的边框样式,如圆角边框(border-radius)、阴影(box-shadow)和渐变背景...

    三维动态FLASH效果消息提示.rar

    综合以上信息,这个压缩包提供的资源可能是一个完整的解决方案,用于在网站中实现一个带有三维动态效果的消息提示功能。开发者可以通过HTML页面将这个Flash组件插入到他们的网站中,并通过JavaScript来控制其显示和...

    2021-2022年收藏的精品资料软件工程师49个超炫的HTML5设计示例.docx

    **:一个兼容多种浏览器的视频播放解决方案,使用HTML5的Video元素并处理兼容性问题。 25. **Projekktor Zwei**:可能是HTML5的视频播放器,提供额外的交互功能。 26. **ContentEditable**:内容可编辑区域,HTML5...

    FontAwesome-pro-5.12.0-web

    它的丰富图标库和灵活的使用方式,使得它成为开发者和设计师的首选图标解决方案。 总之,FontAwesome 5.12.0 Web版以其强大的图标集、多样的样式选择和优化的性能,为Web开发带来便利和创新。无论是初创项目还是...

    blogimage

    这涉及到云存储解决方案,如Amazon S3或Google Cloud Storage,以及CDN(Content Delivery Network)服务,以加快全球范围内的图片加载速度。 3. 响应式设计:现代博客通常采用响应式设计,确保图片在不同设备(桌面...

    Matplotlib64位

    总结起来,这个"Matplotlib64位"安装包提供了在64位系统上使用Python 3.4进行数据可视化的解决方案,包括了Matplotlib及其依赖库Numpy。用户只需双击EXE文件,即可自动安装并解决依赖关系,从而在Python环境中便捷地...

    多彩简单单栏布局博客css模板-橙色 简单 博客 layout.rar

    标题中的“多彩简单单栏布局博客css模板-橙色 简单 博客 layout.rar”指的是一个专门设计用于创建博客...对于不熟悉前端开发的博主来说,这是一个方便的解决方案。同时,模板的简单性也使得维护和更新变得更为轻松。

Global site tag (gtag.js) - Google Analytics