-
在SVG中添加了Javascript，但是不能在JSVGCanvas中运行。5
我要做的是在svg中更换图片，添加了JS在svg中。
在浏览器上能够很好的运行，但是在蜡染的JSVGCanvas中却没有反应。
有没有办法解决这个问题呢？
先谢谢了！2013年4月25日 10:11
2条评论
关注(0)1个答案 按时间排序 按投票排序
-
采纳的答案
帮你解决了这个问题，因为在浏览器中使用javascript操作svg的元素没有那么规范，而batik操作svg元素需要严格按照w3c的svg规范，所以svg文件中的方法需要改为：
function dragOn(spath){ var imgView = document.getElementById("imgView"); imgView.setAttributeNS( "http://www.w3.org/1999/xlink", "href", spath ); }
我已经测试过，具体可参考：
http://www.w3.org/Graphics/SVG/WG/wiki/Href
下面这些方式中，就最后两个是Correct正确的。el.setAttribute( "href", "foo.png" ); el.setAttribute( "xlink:href", "foo.png" ); el.setAttributeNS( "xlink:href", "foo.png" ); el.setAttributeNS( "xlink", "href", "foo.png" ); el.setAttributeNS( xlink, "href", "foo.png" ); (where there is no JS variable called "xlink") el.setAttributeNS( "http://www.w3.org/1999/xlink", "href", "foo.png" ); (Correct) var xlinkns = "http://www.w3.org/1999/xlink"; el.setAttributeNS( xlinkns, "href", "foo.png" ); (Correct)
2013年4月26日 14:00
相关推荐
- 另一个需要注意的地方是，不能直接在Vue模板中使用`v-on:click`与非原生事件。如果要添加自定义事件监听器，可以通过`this.$refs`来获取DOM元素并绑定事件。 ### 实现代码分析 在本文档中，实现的代码关键步骤...
接着，你可以在JavaScript代码中选择SVG元素并启用拖拽功能。以下是一个简单的示例： ```javascript var svgElement = document.getElementById('mySVGElement'); draggy(svgElement); ``` 在这个例子中，`draggy`...
4. **动态创建SVG**：JavaScript还可以在运行时动态创建SVG元素，这在构建数据可视化或复杂交互效果时非常有用。 5. **SMIL动画**：SVG包含一套内置的Simple Animation（SMIL）功能，可以让元素在时间轴上移动、...
而在SVG中集成JavaScript，可以极大地增强SVG图形的交互性和动态性，为用户带来更加丰富的视觉体验。本篇将深入探讨SVG与JavaScript的结合使用。 ### 1. SVG的基本结构 SVG文档通常由`<svg>`根元素开始，它定义了...
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许在网页上创建和展示复杂的图形，包括文字、线条、...在实际项目中，结合现代前端框架如React或Vue，SVG与JavaScript的组合能够发挥更大的威力。
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •...
SVG，全称Scalable Vector Graphics，是一种基于XML的矢量图像格式，可以在网页中用于创建复杂的图形，具有高清晰度、放大不失真、可交互性等优点。JavaScript是SVG在HTML页面中进行动态交互的主要工具，通过...
2. **使用polyfill库**：如`Modernizr`和`SVG4Everybody`等库可以帮助在不支持SVG的浏览器中提供类似的功能。 3. **条件注释或特性检测**：通过JavaScript检测浏览器是否支持SVG，并根据需要加载不同的代码。 4. **...
在SVG图像中添加提示信息，通常是为了提供额外的交互性和用户反馈，使得图形更加易懂。这涉及到SVG的DOM操作和特定的提示元素或者属性的使用。 1. SVG DOM对象： SVG图像中的每个元素都可以被看作是一个DOM对象，这...
8. **兼容性和性能**：Snap.svg库经过优化，具有良好的浏览器兼容性，能在现代浏览器中流畅运行。同时，它尽可能减少了对SVG DOM的直接操作，提高了性能。 9. **插件系统**：Snap.svg有丰富的插件生态系统，可以...
1. **浏览器兼容性**：由于其基于Web的性质，SVGedit可以在几乎所有的现代浏览器上运行，包括Chrome、Firefox、Safari、Edge等，这大大提高了它的可访问性和实用性。 2. **实时编辑**：用户可以直接在浏览器窗口中...
然后，通过JavaScript选择需要添加拖拽功能的SVG元素，并调用插件提供的方法，如`makeDraggable()`，将其变为可拖动。 示例代码可能如下所示： ```html <script src="jillix-svg.draggy.js-d24f840"> <svg width=...
在SVG（可缩放矢量图形）与JavaScript的结合中，导出SVG为图片功能是一项常见的需求。SVG是一种基于XML的矢量图像格式，它允许创建高质量、可缩放的图形，广泛应用于网页设计和应用程序开发。JavaScript作为浏览器端...
总结起来，禁止鼠标右键和在SVG中自定义右键菜单涉及到JavaScript事件处理和DOM操作。通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和...
在本主题中，我们将深入探讨SVG中的平移（Pan）操作以及如何通过JavaScript实现这一功能。 SVG平移是改变图形位置的一种基本变换。在SVG中，你可以使用`<g>`元素的`transform`属性来执行平移操作。这个属性接受一个...
【VM-SVG Javascript Lib】是一个专门用于网页图形绘制的JavaScript类库，它具有广泛的兼容性，能在各种浏览器环境中提供高质量的图形渲染。该库的核心功能是利用SVG（Scalable Vector Graphics）技术来创建矢量图形...
本文详细介绍了 JavaScript 在基于 SVG 的网络地图中的应用，讨论了 SVG 的概念和特点、SVG 在网络地图中的应用、JavaScript 在基于 SVG 的网络地图中的应用等内容，为读者提供了一个全面的了解 JavaScript 在基于 ...
其他现代浏览器如Chrome、Firefox、Safari和Edge通常能更好地支持SVG和相关的JavaScript API，因此在这些浏览器上动画表现会更顺畅。 总结起来，这个项目展示了如何利用SVG、jQuery和自定义的JavaScript库来创建...
早期，SVG并未在所有浏览器中得到广泛支持，SVGWeb通过检测浏览器的类型和版本，自动在不支持SVG的浏览器中加载Flash插件作为备选方案，从而确保SVG内容能在大部分用户设备上正常显示。不过，随着现代浏览器对SVG的...