SVG:linearGradient渐变在直线上失效的问题解决方案
SVG开发里有个较为少见的问题。
对x1=x2或者y1=y2的直线(line以及path),比如:
<path d="M200,10 200,100" stroke="url(#orange_red)"/>
如果,stroke里使用的是渐变效果,那么,在各种浏览器上都会出现同一个BUG,这条线消失了。
原因不好排查,但是道理很简单,参考:
Keyword objectBoundingBox should not be used when the geometry of the
applicable element has no width or no height, such as the case of a horizontal
or vertical line, even when the line has actual thickness when viewed due to
having a non-zero stroke width since stroke width is ignored for bounding box
calculations. When the geometry of the applicable element has no width or
height and objectBoundingBox is specified, then the given effect (e.g., a
gradient or a filter) will be ignored.
简而言之,就是说:
关键字objectBoundingBox这玩意儿,在元素没有宽度或者高度的时候,会失去作用。
linearGradient渐变又依赖这个属性,所以失效了。
解决方案很简单,为linearGradient加上属性gradientUnits="userSpaceOnUse"
gradientUnits是用于规定元素的坐标系统的,有两个属性userSpaceOnUse和objectBoundingBox,后者是默认的。
具体的说明参考:
SVG:linearGradient渐变在直线上失效的问题解决方案的更多相关文章
- p点到(a,b)点两所在直线的垂点坐标及p点是否在(a,b)两点所在直线上
/// <summary> /// p点到(a,b)点两所在直线的垂点坐标 /// </summary> /// <p ...
- lintcode 中等题:Max Points on a Line 最多有多少个点在一条直线上
题目 最多有多少个点在一条直线上 给出二维平面上的n个点,求最多有多少点在同一条直线上. 样例 给出4个点:(1, 2), (3, 6), (0, 0), (1, 3). 一条直线上的点最多有3个. ...
- 一条直线上N个线段所覆盖的总长度
原文:http://blog.csdn.net/bxyill/article/details/8962832 问题描述: 现有一直线,从原点到无穷大. 这条直线上有N个线段.线段可能相交. 问,N个线 ...
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
- BZOJ3403: [Usaco2009 Open]Cow Line 直线上的牛
3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 48 Solved: 41[S ...
- BZOJ 3403: [Usaco2009 Open]Cow Line 直线上的牛( deque )
直接用STL的的deque就好了... ---------------------------------------------------------------------- #include& ...
- 3403: [Usaco2009 Open]Cow Line 直线上的牛
3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 71 Solved: 62[S ...
- opencv利用hough概率变换拟合得到直线后,利用DDA算法得到直线上的像素点坐标
图片霍夫变换拟合得到直线后,怎样获得直线上的像素点坐标? 这是我今天在图像处理学习中遇到的问题,霍夫变换采用的概率霍夫变换,所以拟合得到的直线信息其实是直线的两个端点的坐标,这样一个比较直接的思路就是 ...
- [Swift]LeetCode149. 直线上最多的点数 | Max Points on a Line
Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...
随机推荐
- 【趣事】用 JavaScript 对抗 DDOS 攻击
继续趣事分享. 上回聊到了大学里用一根网线发起攻击,今天接着往后讲. 不过这次讲的正好相反 -- 不是攻击,而是防御.一个奇葩防火墙的开发经历. 第二学期大家都带了电脑,于是可以用更高端的方法断网了. ...
- [WCF]缺少一行代码引发的血案
这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约 ...
- 计算机程序的思维逻辑 (54) - 剖析Collections - 设计模式
上节我们提到,类Collections中大概有两类功能,第一类是对容器接口对象进行操作,第二类是返回一个容器接口对象,上节我们介绍了第一类,本节我们介绍第二类. 第二类方法大概可以分为两组: 接受其他 ...
- scala练习题1 基础知识
1, 在scala REPL中输入3. 然后按下tab键,有哪些方法可以被调用? 24个方法可以被调用, 8个基本类型: 基本的操作符, 等: 2,在scala REPL中,计算3的平方根,然 ...
- iOS开发 判断当前APP版本和升级
从iOS8系统开始,用户可以在设置里面设置在WiFi环境下,自动更新安装的App.此功能大大方便了用户,但是一些用户没有开启此项功能,因此还是需要在程序里面提示用户的 方法一:在服务器接口约定对应的数 ...
- HP服务器 hp 360g5 centos7安装问题
HP服务器 hp 360g5 centos7安装问题 一 :启动盘无法识别硬盘 1.进入安装光盘,用上下键选择安装centos--Install Centos7(注意不可按Enter键),如图: 2 ...
- .JavaWeb文件上传和FileUpload组件使用
.JavaWeb文件上传 1.自定义上传 文件上传时的表单设计要符合文件提交的方式: 1.提交方式:post 2.表单中有文件上传的表单项:<input type="file" ...
- Linux学习日记-MVC的部署(三)
一.Mvc与wcf 相对WCF的部署MVC还是有点麻烦,我们要考虑哪些dll是不需要的,哪些是要拷贝到本地的. 而WCF因为有些配置文件不支持,我们只需要在配置wcf时不使用配置文件而直接使用代码就行 ...
- Netty5使用自签证书实现SSL安全连接
这次使用的Netty是最新的5.0 Alpha2版本,下载地址是:http://dl.bintray.com/netty/downloads/netty-5.0.0.Alpha2.tar.bz2,发布 ...
- 架构 Roadmap 笔记分享
虽然我们的架构不是开源的,不过一些笔记可以愿意公开和大家讨论一下,我相信不少人在和我们干着同样的事情,那不如一块儿交流一下,这样我们可以更快. 这里前端,后端都有,前端我们用的是 avalon js, ...