不同尺寸的SVG的CSS效果（阴影，笔画）

我对SVG（不同尺寸）和效果（笔画，阴影等）有问题笔画（例如）尺寸不一样，因为图标B较小并且“缩放”为500px。不同尺寸的SVG的CSS效果（阴影，笔画）

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

我必须分别计算每个SVG的效果吗？：/
还是有一个选项只能缩放SVG而不是效果？
或者我可以重新计算（使用PHP）SVG吗？那么每个SVG都有相同的大小？

FIDDLE
http://jsfiddle.net/tqef7qkp/

CSS

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

例 example

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">

来源

2014-11-22 user2306309

您可以用百分比指定行程宽度，而不是用户空间单位。您也可以用相同的方式指定阴影过滤器（在objectBoundingBox单位中）。这会根据您的svg's的大小和您的视框的大小来确定您的笔划大小。

来源

2014-11-22 04:06:03

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

这可能解决该问题行程。

输出： enter image description here

来源

2014-11-22 00:46:30 Bebbolin

所以最好的（也是干净的）方法是分别计算每个SVG的笔画和阴影？不太舒服：/ – user2306309 2014-11-22 00:53:46

也许我没有实现你的问题，但是如果你在svg文件中有多个“ Bebbolin 2014-11-22 01:04:37

问题是大小，看看viewBox。图标A viewBox =“0 0 500 500”和图标B viewBox =“0 0 50 50”。我所有的SVG都有不同的大小。图标C viewBox =“0 0 120 120”，图标D viewBox =“0 0 330 330”等当我现在将图标大小调整为500px500px（使用SVG属性宽度和高度）时，笔划也调整大小。 – user2306309 2014-11-22 01:12:27

不同尺寸的SVG的CSS效果（阴影，笔画）

回答

相关问题