SVG linearGradient不显示路径（多浏览器） [英] SVG linearGradient not showing on path (multiple browser)

问题描述

它在svg-editor（在浏览器内）和Inkscape 。

 <？xml version =1.0encoding =UTF-8standalone =no？> 
 
< svg xmlns =http://www.w3.org/2000/svgheight =300width =85version =1.1> 
< defs> 
< linearGradient id =fill_bgx2 =0.5> 
  < / linearGradient> 
< / defs> 
< g> 
 <路径d =m3.5,16.5c12.5,6.6507,21,6.6507,33,0v271.47c-12.5,7.1172-22,7.1172-33,0v-135.74-135.73,0.00002,0.00001 ，0.00002,0.00001zstroke =＃352c2cfill =url（#fill_bg）/> 
< / g> 
< / svg> 
  

笔画正确显示，但填充完全缺失（透明），

我是否使用浏览器不支持的内容？

解决方案

对不起，有一个CSS定义所有路径元素。

一旦我删除，一切正常。

I can't figure out why this gradient isn't working in Chrome/Firefox/IE.

Its working in svg-editor (inside browser) and Inkscape.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" height="300" width="85" version="1.1">
 <defs>
  <linearGradient id="fill_bg" x2="0.5">
   <stop stop-color="#8e8e8e" offset="0"/>
   <stop stop-color="#d6d6d6" offset="0.59766"/>
  </linearGradient>
 </defs>
 <g>
  <path d="m3.5,16.5c12.5,6.6507,21,6.6507,33,0v271.47c-12.5,7.1172-22,7.1172-33,0v-135.74-135.73,0.00002,0.00001,0.00002,0.00001z" stroke="#352c2c" fill="url(#fill_bg)"/>
 </g>
</svg>

The stroke is showing correctly, but the fill is missing completely (transparent),

Did I use something that browsers don't support?

解决方案

Sorry, nevermind I had an CSS defintion for all path elements.

Once I removed that everything worked fine.

这篇关于SVG linearGradient不显示路径（多浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！