svg給直線應用線性漸變失效解決方案

螞蟻小編發表於2017-02-01
SVG
給一條直線應用線性漸變的時候，可能會失效。

並不是全都失效，有時候也可以，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
svg {
  border:1px solid red;
}
</style>
</head>
<body>
<svg width="250" height="150">
  <defs>
    <linearGradient id="purple" x1="0%" y1="0%" x2="100%" y2="0%">
      <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)"
  />
  <line x1="10" y1="30"
    x2="180" y2="50"
    style="fill:none;stroke-width:10"
    stroke="url(#purple)" />
</svg>
</body>
</html>

傾斜一定角度的可以應用線性漸變，水平的就直接無法渲染了。

在預設條件下漸變的gradientUnits預設屬性值是objectBoundingBox，是以應用漸變的元素為參考的，如果此元素沒有高度或者寬度，可能就會失效，只要將gradientUnits屬性值修改為userSpaceOnUse即可，程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章