svg给直线应用线性渐变失效解决方案

我心飞翔 分类:前端教程

给一条直线应用线性渐变的时候,可能会失效。

并不是全都失效,有时候也可以,看如下代码实例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
svg {
  border:1px solid red;
}
</style>
</head>
<body>
<svg width="250" height="150">
  <defs>
    <linearGradient id="purple"
      x1="10" y1="10"
      x2="180" y2="10"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <line x1="10" y1="10"
    x2="180" y2="10"
    style="fill:none;stroke-width:10"
    stroke="url(#purple)"
  />
</svg>
</body>
</html>

倾斜一定角度的可以应用线性渐变,水平的就直接无法渲染了。

在默认条件下渐变的gradientUnits默认属性值是objectBoundingBox,是以应用渐变的元素为参考的,如果此元素没有高度或者宽度,可能就会失效,只要将gradientUnits属性值修改为userSpaceOnUse即可,代码修改如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
svg {
  border:1px solid red;
}
</style>
</head>
<body>
<svg width="250" height="150">
  <defs>
    <linearGradient id="purple"
      x1="10" y1="10"
      x2="180" y2="10"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <line x1="10" y1="10"
    x2="180" y2="10"
    style="fill:none;stroke-width:10"
    stroke="url(#purple)"
  />
</svg>
</body>
</html>

回复

我来回复
  • 暂无回复内容