问题标签 [svg]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
8242 浏览

include - 在 SVG 中包含 SVG 文件

我的 SVG 文件的 defs 部分中有一个 linearGradient,并使用 fill="url(#myGradientName)" 引用它。到目前为止效果很好。

我想我应该能够将我的整个 defs 部分放在它自己的 SVG 文件中,然后从我所有的 SVG 图像中引用它。也就是说,类似:

样式.svg:

图片.svg:

但我似乎无法应用这种风格。我对这个文件 (styles.svg#myGradient) 外部的 ID 有错误的语法吗?我是否需要先以某种方式明确包含该文件?

我一直在讨论 SVG 规范,看起来这应该是可能的,但没有一个例子真正表明它已经完成。

编辑:FOP FAQ建议正确的语法是 fill="url(grad.svg#PurpleToWhite)",但这在 Gecko 或 Webkit 中不起作用。这是正确的,没有人支持它,还是我做错了什么?

0 投票
8 回答
36188 浏览

javascript - 如何在浏览器中检测对 VML 或 SVG 的支持

我正在编写一些 javascript,需要在 SVG 或 VML 之间进行选择(或两者兼而有之,或其他东西,这是一个奇怪的世界)。虽然我知道目前只有 IE 支持 VML,但我更愿意检测功能而不是平台。

SVG 似乎有一些您可以使用的属性:例如 window.SVGAngle。

这是检查 SVG 支持的最佳方式吗?

VML有什么等价物吗?

不幸的是 - 在 Firefox 中,我可以很高兴地在 VML 中进行所有渲染而不会出错 - 屏幕上什么也没有发生。从脚本中很难检测到这种情况。

0 投票
1 回答
1845 浏览

javascript - SVG 鼠标指针位置

我想知道当鼠标指针在 SVG viewBox 的范围内时,如何使用 JavaScript 找出鼠标指针的位置。我是否需要使用事件模型来跟踪所有各种鼠标运动事件,或者有没有办法可以轮询鼠标指针,让它在我需要的时候告诉我它在哪里?

0 投票
8 回答
17266 浏览

javascript - 在 GWT 中使用 SVG

我想知道是否可以在面板中包含 SVG 内容(或在 GWT 中可以使用的任何内容),能够以编程方式向 SVG 添加更多内容(例如添加圆或曲线),并处理鼠标事件(这将是在 SVG 或 GWT 中?)。我尝试创建一个 HTML 对象,添加以下内容:

那没有用(输出中没有任何可见),但我不确定是因为我做错了还是不允许这样做。

我可以使用 Google Visualization 的 LineChart 在 GWT 中做一个简单的示例,但我想摆脱 Google Visualization 并能够自己生成 SVG 并进一步自定义它。我环顾四周,许多资源都指向使用 Canvas,但我不确定这是否是最好的路线。

我对这里的例子也有点困惑。我尝试了一个简单的复制粘贴在本地尝试,但它似乎根本不起作用。但是,我能够获得另一个仅使用 HTM 的示例(嵌入 src 指向 SVG 文件)L + 单独的 SVG 文件,但我无法使用 GWT 使用 RootPanel.get(...) 访问它。

编辑:我已经阅读了有关 SVG 不能与托管浏览器一起使用的信息,并且编译它确实有效,但我不确定如何引用 SVG(我已通过 将其放入 HTML 中)。如果我可以访问它,那么大概我可以添加到它的innerHTML。我已经尝试过 RootPanel.get("hi").getElement().setInnerHTML("...") 但这似乎不起作用还是我搞砸了? 我想目标是能够操作我以某种方式链接的 SVG 文件(无论是在 GWT 还是在 HTML 中),并能够根据用户的输入对其进行修改。

第二次编辑 到目前为止,我一直在实际的 SVG 文件中编写功能。在我们的设置中,我们的 SVG 是一个嵌入式对象,我们将“文档”传递给嵌入式 SVG。将信息从嵌入对象传入和传出 HTML 是非常可行的,因为 HTML 可以访问我们的 SVG 函数,而 SVG 可以访问“文档”。

这样做有更透明的方法(Rapahel),FireBug 可以直接看到 SVG,这很好,但现在不太必要。到目前为止,我认为我看过的任何解决方案都不是 IFrame,但我可能是错的。一点警告,SVG 有时会很慢。

我想说我的问题已经解决了(有点?),但我目前没有使用 Raphael、jQuery 或 GWT,但如果我想使用 GWT,我在回答中描述的方法应该仍然有效。

0 投票
3 回答
1832 浏览

apache-flex - 有 SVG 到 MXML 转换器吗?

我正在尝试在我的 Flex 应用程序中使用 SVG 文件 - 但似乎最好的方法是将其转换为 MXML。但是,我找不到 SVG 到 MXML 的转换器。似乎有许多 SVG 到 XAML 转换器(用于 Silverlight/C#),但我找不到任何与 Flash/Flex 类似的东西。

任何帮助,将不胜感激。

谢谢, 卡提克

0 投票
3 回答
8988 浏览

java - “未找到 SAX2 驱动程序类 org.apache.crimson.parser.XMLReaderImpl”在 Tomcat 上的 web 应用程序中使用 Batik

这可能与类路径问题有关,但目前我真的不确定,因为在某些机器上我没有收到此错误。

堆栈顶部的错误是SAX2 driver class org.apache.crimson.parser.XMLReaderImpl not found。为什么我只会在某些环境中收到此错误,而在其他环境中不会?我该如何进一步调查和/或解决这个问题?

环境:

  • Mac 或 PC 上的 Jetty == OK
  • Mac 上的 Tomcat 5 或 6 == OK
  • Win XP 上的 Tomcat 5 或 6 == 错误
  • CentOS 上的 Tomcat 6 == 错误

POM 中的版本:

  • 蜡染:蜡染:罐子:1.5:编译
  • net.sf.saxon:saxon:jar:8.7:compile
  • 蜡染:蜡染转码器:jar:1.6-1:编译
    • 蜡染:蜡染桥:罐子:1.6-1:编译
    • 蜡染:蜡染-gvt:jar:1.6-1:编译
    • 蜡染:蜡染-awt-util:jar:1.6-1:编译
    • 蜡染:蜡染工具:罐子:1.6-1:编译
    • 蜡染:batik-gui-util:jar:1.6-1:compile
    • 蜡染:蜡染分机:罐子:1.6-1:编译
    • xml-apis:xmlParserAPIs:jar:2.0.2:compile
    • 蜡染:蜡染脚本:jar:1.6-1:编译
    • 蜡染:batik-svg-dom:jar:1.6-1:compile
    • 蜡染:蜡染-dom:jar:1.6-1:编译
    • 蜡染:蜡染-css:jar:1.6-1:编译
    • 蜡染:蜡染-xml:jar:1.6-1:编译
    • 蜡染:蜡染解析器:jar:1.6-1:编译
    • fop:fop:jar:0.20.5:编译
    • 蜡染:batik-1.5-fop:jar:0.20-5:compile
    • xml-apis:xml-apis:jar:1.0.b2:编译
    • xalan:xalan:jar:2.4.1:编译
    • xerces:xercesImpl:jar:2.2.1:编译
    • avalon 框架:avalon 框架:jar:4.0:编译
0 投票
3 回答
1307 浏览

java - Scaling images/icons in Java

A project I am working on needs to be resized when the monitor resolution changes. Due to legacy code and other issues, we do it by using a custom library which scales all the components to the appropriate sizes when the resolution changes.

However, when we scale some of the images/icons used in the project, they become blurry/fuzzy/aliased. Mostly because they are all raster gifs.

One solution we thought might work to mitigate this issue is to either use Vector images and convert them into raster images on the fly (and cache them for performance improvements).

What do you all think? Would this be a good way to go? Or are there better alternatives to my chosen method?

If this is a better way, then can someone give pointers to how to go about the svg conversion to say jpg or png(preferably). Available (and commercially usable) libraries?

Thanks

0 投票
2 回答
2708 浏览

javascript - HTML 页面中的 VML/SVG 编辑器

在过去的几年里,我已经集成了各种 WYSIWYG HTML 编辑器,但我认为我在这方面遇到了障碍。

我们需要一种让人们编辑文本的方法,该文本在渲染时会变成 VML/SVG,但仍可编辑,具有最少的样式,例如粗体、斜体、字体和大小,并且如果可能的话,能够在画布上的任何位置创建文本区域. Google Docs 在他们的演示文稿编辑器中似乎有一个。类似的东西会起作用〜它非常接近我们正在寻找的东西。

有谁知道这样做的商业或免费编辑器(必须是基于浏览器的),如果没有,有没有人接近这样做,如果有,你的结果是什么。欢迎任何其他信息、链接、建议等 - 我似乎在这个问题上碰了壁。

谢谢。

0 投票
2 回答
3317 浏览

python - 如何转换 SVG 图像以用于 Pisa / XHTML2PDF?

我正在使用Pisa/XHTML2PDF在 Django 中动态生成 PDF。不幸的是,我还需要包含 SVG 图像,我认为这不是一件容易的事。

a)将 SVG 转换为 PNG/JPG(在 Python 中)或 b)在比萨的 PDF 导出中包含 SVG 的最佳方法是什么?

0 投票
7 回答
37590 浏览

javascript - Svg 图表库

你知道是否有任何类似于http://www.amcharts.com/ (Flash) 的 SVG + js 图表库。我需要在不支持 Flash 但支持 SVG 的浏览器中提供漂亮的交互式图表功能。