Question

我有一些内部defs的SVG代码 - （这里是'A'字符下面的渐变）

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 13.8 13.6" enable-background="new 0 0 13.8 13.6" xml:space="preserve">
  <g>
    <path fill="#231F20" d="M5.1,7.1L4.2,9.9l-1.9,0L5.5,0l2.3,0l3.2,9.9l-2,0L8.2,7.1L5.1,7.1z M7.9,5.7L7.1,3.3C7,2.7,6.8,2,6.6,1.4
		l0,0C6.5,2,6.3,2.7,6.1,3.3L5.4,5.7L7.9,5.7z" />
  </g>
  <linearGradient id="textColor" gradientUnits="userSpaceOnUse" x1="-7.424569e-007" y1="12.3054" x2="13.8333" y2="12.3054">
    <stop offset="0" style="stop-color:#EC1C24" />
    <stop offset="0.1675" style="stop-color:#F6921E" />
    <stop offset="0.3695" style="stop-color:#FFF100" />
    <stop offset="0.5616" style="stop-color:#8BC53F" />
    <stop offset="0.7882" style="stop-color:#26A9E0" />
    <stop offset="1" style="stop-color:#652D90" />
  </linearGradient>
  <rect x="0" y="11" fill="url(#textColor)" width="13.8" height="2.7" />
</svg>

现在使用use元素我可以在外部引用相同的SVG like this。

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="textColor" viewBox="0 0 13.8 13.6" enable-background="new 0 0 13.8 13.6">
    <defs>
      <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-7.424569e-007" y1="12.3054" x2="13.8333" y2="12.3054">
        <stop offset="0" style="stop-color:#EC1C24" />
        <stop offset="0.1675" style="stop-color:#F6921E" />
        <stop offset="0.3695" style="stop-color:#FFF100" />
        <stop offset="0.5616" style="stop-color:#8BC53F" />
        <stop offset="0.7882" style="stop-color:#26A9E0" />
        <stop offset="1" style="stop-color:#652D90" />
      </linearGradient>
    </defs>
    <path fill="#231F20" d="M5.1,7.1L4.2,9.9l-1.9,0L5.5,0l2.3,0l3.2,9.9l-2,0L8.2,7.1L5.1,7.1z M7.9,5.7L7.1,3.3C7,2.7,6.8,2,6.6,1.4
		l0,0C6.5,2,6.3,2.7,6.1,3.3L5.4,5.7L7.9,5.7z" />
    <rect x="0" y="11" fill="url(#gradient)" width="13.8" height="2.7" />
  </symbol>
</svg>

<svg>
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#textColor"></use>
</svg>

到目前为止一切顺利。

问题是当我使用相同的SVG并将其放在外部文件中，并从html文件中引用它时 - 内部渐变被忽略!!

测试一下：

我在同一目录中有两个文件：

symbol.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
</head>

<body>
  <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="symbol.svg#textColor"></use></svg>
</body>
</html>

symbol.svg

<svg xmlns="http://www.w3.org/2000/svg" >
  <symbol id="textColor" viewBox="0 0 13.8 13.6" enable-background="new 0 0 13.8 13.6">
        <defs>
            <linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="-7.424569e-007" y1="12.3054" x2="13.8333" y2="12.3054">
                <stop offset="0" style="stop-color:#EC1C24" />
                <stop offset="0.1675" style="stop-color:#F6921E" />
                <stop offset="0.3695" style="stop-color:#FFF100" />
                <stop offset="0.5616" style="stop-color:#8BC53F" />
                <stop offset="0.7882" style="stop-color:#26A9E0" />
                <stop offset="1" style="stop-color:#652D90" />
            </linearGradient>
        </defs>
        <path fill="#231F20" d="M5.1,7.1L4.2,9.9l-1.9,0L5.5,0l2.3,0l3.2,9.9l-2,0L8.2,7.1L5.1,7.1z M7.9,5.7L7.1,3.3C7,2.7,6.8,2,6.6,1.4
        l0,0C6.5,2,6.3,2.7,6.1,3.3L5.4,5.7L7.9,5.7z" />
        <rect x="0" y="11" fill="url(#gradient)" width="13.8" height="2.7" />
    </symbol> 
</svg>

结果：

没有渐变！

那么如何使用支持内部定义的外部SVG呢？

引用外部SVG的SVG <use>元素忽略内部定义</use>

0 个答案: