svg
程序员猪猪侠
这个作者很懒,什么都没留下…
展开
-
在绘图过程中的鼠标事件
在绘图的过程要用到的无非就是mouseDown,mouseMove,mouseUp事件。可能你还会说有mouseDrag事件,mouseDrag其实我们可以自己来判断,mouseDown+mouseMove构成了一个mouseDrag事件,所以我们监听上面的三个事件足够了。如果还有一下图形的绘制中需要双击结束绘制,那么也要监听dblclick双击事件。看起来是比较简单,但是这些鼠标事件构成了我们诸多操作的源头。要理清这些事件中分别要实现哪些功能,就要先思考在绘图过程中都有哪些模式。 要搞清具...原创 2020-09-21 15:33:59 · 416 阅读 · 0 评论 -
对svg中的元素使用animate.css的旋转,不围绕中心点旋转解决方案
近来在用animate.css实现一些svg的效果,使用rotateIn发现并不能围绕着中心旋转。看了网上的一些文章设置translate到中心点,然而非正途啊。有木有简单的方法呢。经过一番折腾,终于被我找到了,就是这个神奇的transform-box样式,而使用transform-box: fill-box可以使svg 元素像个html一样被操作。<html> <body> <svg width="2000" height="2000" vi原创 2020-09-21 08:46:55 · 1656 阅读 · 1 评论 -
在测试batik源码中的问题
将batik-1.8-src中的sources源码放到eclipse项目中执行时,发现会出现空指针的错误,看了一下找不到XMLResourceDescriptor.properties文件,去batik-1.8-src中去找这个文件,发现原来在resources中,当打包的时候会将resources打包到jar包,但是如果单独拎出源码进行测试,则还是要将resources中的properties文原创 2017-11-29 10:41:52 · 396 阅读 · 0 评论 -
将batik打成一个jar包
1 首先从官网上下载batik-1.8-src2 进入到此目录下,执行.\build.bat all-jar3 在batik-src-1.8\batik-1.8\batik-1.8\lib目录下可见生成的batik-all-1.8.jar原创 2017-11-29 09:50:14 · 954 阅读 · 0 评论 -
使用CSS3代替SVG中的animateTransform
先来看使用animate <path fill="#00FF00" d="M118.453,39.861c-3.469,6.964-8.037,16.159-10.176,20.402l-3.932,7.781l-2.486-0.871 c-3.354-1.088-10.984-1.088-14.511,0.055c-1.562,0.49-2.892,0.816-2.949,0.70原创 2017-08-18 11:53:19 · 2593 阅读 · 0 评论 -
batik1.8在文字渲染上的bug
直接上对比图,先上源代码,下面是一个柱形图 UaUbUcUabUbcUac020406080100120140kv1351721.6120.28272.4浏览器的效果在看一下batik1.8渲染的效果吧:明显的数字错位了,经我分析是text元素属性的dx这个量batik在解析的时候没有处理好原创 2016-12-14 15:58:49 · 611 阅读 · 0 评论 -
svg中use元素引用symbol样式的思考
对于use元素当引用的symbol当只有填充色或线色变化时可以通过给use元素添加class来减少代码量。直接上代码 svg line { stroke: inherit; } use.uncharged{ fill: #4BC0A5;原创 2016-11-16 10:32:52 · 4712 阅读 · 1 评论 -
batik在shape-Rending方面的bug
在我对line元素未设置shape-Rending时,line元素未设置stroke-linecap属性,在batik渲染和浏览器渲染都木有问题。当我为line元素设置了shape-Rending为crispEdges后,发现用batik打开线居然不见了,使用浏览器打开OK正常。当为line元素设置stroke-linecap属性后,发现batik才能渲染出来原创 2016-09-28 11:34:23 · 423 阅读 · 0 评论 -
java.lang.NoClassDefFoundError: org/apache/xml/serializer/TreeWalker
打开项目的jar包,发现这个类是空的(如下图)于是在网上找了相关的资料,发现原本这个类是包含在xalan.jar中的,但是xalan-j2.7.0版的发布包中,将serializer包中的类单独打包成serializer.jar,不再包含在xalan.jar中,所以才会即使添加了xalan.jar也无法找到该类,添加后即可解决问题。下载地址 http://www.java2转载 2016-09-18 14:30:10 · 6600 阅读 · 8 评论 -
batik1.8解析base64嵌入图像时出现url不识别的错误
如下面的svg文件包含了嵌入的png,使用batik1.7可以正确打开,而升级成batik1.8后报url不识别的错误解决方法 查阅了batik的官网bug库,发现已经有高手解决此问题,在这里向高手致敬。下面说一下步骤,已经亲试有效。当然batik的源码肯定得修改所以首先确保你有batik1.8的src文件。 1 修改 resources/M原创 2016-09-14 17:32:35 · 18745 阅读 · 0 评论 -
batik1.8相对于1.7的改进
以前写的java程序用的batik1.7。后来1.8出来了并没有发现什么不同,就一直用1.7了。今天偶然间需要做个图表。使用d3生成了一个柱状图,柱状图的代码如下.axis text { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering:原创 2016-08-02 11:30:27 · 1451 阅读 · 0 评论 -
控制点生成算法
首先看在SVGElementsManager中的两个函数 public Rectangle2D getSensitiveBounds(Element shape) { Rectangle2D bounds = null; if (shape != null) { BridgeContext ctxt原创 2016-01-15 15:47:28 · 2676 阅读 · 0 评论 -
svg中的arc转化为java中的arc
最近项目需要解析svg中的path.直线和贝塞尔曲线都好办,唯独arc不太好办.svg中的arc是由弧上两点,角度确定的,而java中的arc是由弧的外接矩形和角度决定的.所有中间需要一个转换工作.好吧,我自己是转化不来的,apache的batik提供了全套的svg解析,它肯定转化过来了.于是去拔它的算法.中间辛苦不用说,找到了相关的计算类. 仿照P转载 2015-10-13 13:30:10 · 1494 阅读 · 0 评论 -
使用CSS来设置SVG中Use元素的样式
今天看到技术群中有人问svg中use元素可以设置样式属性不?因为他的symbol有200多种,但是只是颜色不一样。如果挨个定义,那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/这篇文章,收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码,比原创 2015-08-12 13:39:33 · 6079 阅读 · 1 评论