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

时间:2015-01-26 08:45:28

标签: html svg

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

使用SVG内联 - It looks like this

<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文件中引用它时 - 内部渐变被忽略!!

测试一下:

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

  1. 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>
    
  2. 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>
    
  3. 结果:

    没有渐变!

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

0 个答案:

没有答案