SVG开发里有个较为少见的问题。

对x1=x2或者y1=y2的直线(line以及path),比如:

<path d="M200,10 200,100" stroke="url(#orange_red)"/>

如果,stroke里使用的是渐变效果,那么,在各种浏览器上都会出现同一个BUG,这条线消失了。

原因不好排查,但是道理很简单,参考:

www.w3.org

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,后者是默认的。

具体的说明参考:

gradientUnits MDN

SVG:linearGradient渐变在直线上失效的问题解决方案的更多相关文章

  1. p点到(a,b)点两所在直线的垂点坐标及p点是否在(a,b)两点所在直线上

     /// <summary>         ///  p点到(a,b)点两所在直线的垂点坐标         /// </summary>         /// <p ...

  2. lintcode 中等题:Max Points on a Line 最多有多少个点在一条直线上

    题目 最多有多少个点在一条直线上 给出二维平面上的n个点,求最多有多少点在同一条直线上. 样例 给出4个点:(1, 2), (3, 6), (0, 0), (1, 3). 一条直线上的点最多有3个. ...

  3. 一条直线上N个线段所覆盖的总长度

    原文:http://blog.csdn.net/bxyill/article/details/8962832 问题描述: 现有一直线,从原点到无穷大. 这条直线上有N个线段.线段可能相交. 问,N个线 ...

  4. jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

  5. BZOJ3403: [Usaco2009 Open]Cow Line 直线上的牛

    3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 48  Solved: 41[S ...

  6. BZOJ 3403: [Usaco2009 Open]Cow Line 直线上的牛( deque )

    直接用STL的的deque就好了... ---------------------------------------------------------------------- #include& ...

  7. 3403: [Usaco2009 Open]Cow Line 直线上的牛

    3403: [Usaco2009 Open]Cow Line 直线上的牛 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 71  Solved: 62[S ...

  8. opencv利用hough概率变换拟合得到直线后,利用DDA算法得到直线上的像素点坐标

    图片霍夫变换拟合得到直线后,怎样获得直线上的像素点坐标? 这是我今天在图像处理学习中遇到的问题,霍夫变换采用的概率霍夫变换,所以拟合得到的直线信息其实是直线的两个端点的坐标,这样一个比较直接的思路就是 ...

  9. [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. ...

随机推荐

  1. 来,给Entity Framework热热身

    先来看一下Entity Framework缓慢的初始化速度给我们更新程序带来的一种痛苦. 我们手动更新程序时通常的操作步骤如下: 1)把Web服务器从负载均衡中摘下来 2)更新程序 3)预热(发出一个 ...

  2. SQL Server内存遭遇操作系统进程压榨案例

    场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没当回事,以为是有什么统计类的查询,后来越来越频繁. 探索: 我决定来查一下,究竟是什么在作怪,我排查的 ...

  3. ABP文档 - 通知系统

    文档目录 本节内容: 简介 发送模式 通知类型 通知数据 通知重要性 关于通知持久化 订阅通知 发布通知 用户通知管理器 实时通知 客户端 通知存储 通知定义 简介 通知用来告知用户系统里特定的事件发 ...

  4. redis 学习笔记(2)

    redis-cluster 简介 redis-cluster是一个分布式.容错的redis实现,redis-cluster通过将各个单独的redis实例通过特定的协议连接到一起实现了分布式.集群化的目 ...

  5. SQL Server2016升级前几点自检

    SQL Server2016已经出来一段时间了,而且最新的SP1包也于2016年11月18日正式发布,各种新的特性推出让我们跃跃欲试.那么对于我们真实的业务环境,特别是生产环境要不要"跟风& ...

  6. Objective-C枚举的几种定义方式与使用

    假设我们需要表示网络连接状态,可以用下列枚举表示: enum CSConnectionState { CSConnectionStateDisconnected, CSConnectionStateC ...

  7. 初识JavaScript

    JavaScript ECMA-262: 变量,函数,对象,数据类型....唯独没有输入和输出. Javascript:包含 ECMA-262,核心 BOM 浏览器对象模型, DOM 文档对象模型 什 ...

  8. 拦截UIViewController的popViewController事件

    实现拦截UIViewController的pop操作有两种方式: 自定义实现返回按钮,即设置UIBarButtonItem来实现自定义的返回操作. 创建UINavigatonController的Ca ...

  9. DevExpress第三方控件使用实例之ASPxPopupControl弹出子窗体

    弹出页面控件:ASPxPopupControl, <dxpc:ASPxPopupControl ID="popubCtr" runat="server" ...

  10. 分布式唯一ID生成服务

    SNService是一款基于分布式的唯一ID生成服务,主要用于提供大数量业务数据建立唯一ID的需要;服务提供最低10K/s的唯一ID请求处理.如果你部署服务的CPU资源达到4核的情况下那该服务最低可以 ...