具有不同大小的SVG上的CSS效果（阴影，笔画）

Question

我有SVG（不同大小）和effetcs（笔画，阴影等）的问题 笔画（例如）的大小不同，因为图标B较小并且“缩放”为500px。

解决此问题的正确方法是什么？

• 我必须单独计算每个SVG的效果吗？ ：/
• 或者是否可以选择仅缩放SVG而不是效果？
• 或者我可以重新计算（使用PHP）SVG吗？那么每个SVG都有相同的大小？

FIDDLE
http://jsfiddle.net/tqef7qkp/

CSS

stroke: #39A02E;  
stroke-width: 5;

示例

<小时/> 的 A）

<svg xml:space="preserve" 
preserveAspectRatio= "xMinYMin meet" 
enable-background="new 0 0 500 500" 
viewBox="0 0 500 500" 
width="500px" 
height="500px" 
y="0px" 
x="0px" 
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">

<小时/> 的 B）

<svg xml:space="preserve"
preserveAspectRatio= "xMinYMin meet" 
enable-background="new 0 0 50 50" 
viewBox="0 0 50 50" 
width="500px" 
height="500px" 
y="0px" 
x="0px" 
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">

Answer 1

您可以指定百分比的笔画宽度，而不仅仅是userSpace单位。您也可以使用相同的方式指定阴影过滤器（在objectBoundingBox单元中）。这样可以根据svg的大小调整笔画大小与视图框大小的对比。

Answer 2

<style type="text/css" >
  <![CDATA[
   g {  stroke: #39A02E;  
   stroke-width: 1;  
   fill:url(#rgrad);}
  ]]>
</style>

这可以解决中风问题。

输出：