我有一些内部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文件中引用它时 - 内部渐变被忽略!!
测试一下:
我在同一目录中有两个文件:
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呢?