zoukankan      html  css  js  c++  java
  • SVG:linearGradient渐变在直线上失效的问题解决方案

    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

  • 相关阅读:
    大话设计模式--建造者模式 Builder -- C++实现实例
    HTTP状态码大全
    安装mongodb卡顿
    sublime_win配置
    sublime__最全面的 Sublime Text 使用指南
    sublime text 3搭建python 的ide
    spring boot与 spring.factories
    自定义xml spring bean
    统计分析: 跨库多表join
    java基础
  • 原文地址:https://www.cnblogs.com/anrainie/p/5996496.html
Copyright © 2011-2022 走看看