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. ...
随机推荐
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- javascript的api设计原则
前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块.系卤煮自己总结的一些经验和教训.本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来.很难做到 ...
- AutoMapper随笔记
平台之大势何人能挡? 带着你的Net飞奔吧! http://www.cnblogs.com/dunitian/p/4822808.html#skill 先看效果:(完整Demo:https://git ...
- Linux学习之探索文件系统
Linux,一起学习进步- ls With it, we can see directory contents and determine a variety of important file ...
- 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~
一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...
- 深入浅出Redis-redis哨兵集群
1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...
- Android 调用百度地图API
一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...
- MongoDB学习笔记六—查询下
查询内嵌文档 数据准备 > db.blog.find().pretty() { "_id" : ObjectId("585694e4c5b0525a48a441b5 ...
- C#开发中使用配置文件对象简化配置的本地保存
C#开发中使用配置文件对象简化配置的本地保存 0x00 起因 程序的核心是数据和逻辑,开发过程中免不了要对操作的数据进行设置,而有些数据在程序执行过程中被用户或程序做出的修改是应该保存下来的,这样程序 ...
- 集成基于CAS协议的单点登陆
相信大家对单点登陆(SSO,Single Sign On)这个名词并不感到陌生吧?简单地说,单点登陆允许多个应用使用同一个登陆服务.一旦一个用户登陆了一个支持单点登陆的应用,那么在进入其它使用同一单点 ...