不同大小的 SVG 上的 CSS 效果（阴影、描边）答案

【问题标题】：CSS effect (shadow, stroke) on SVG with different sizes不同大小的 SVG 上的 CSS 效果（阴影、描边）
【发布时间】：2015-01-20 06:25:01
【问题描述】：

我对 SVG（不同尺寸）和效果（笔触、阴影等）有疑问笔划（例如）具有不同的大小，因为图标 B 较小并且“缩放”到 500 像素。

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

我必须单独计算每个 SVG 的效果吗？ :/
或者是否有只缩放 SVG 而不是效果的选项？
或者我可以重新计算（使用 PHP）SVG 吗？这样每个 SVG 都具有相同的大小？

FIDDLE
http://jsfiddle.net/tqef7qkp/

CSS

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

示例

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

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

【问题讨论】：

标签： php vector svg size stroke

【解决方案1】：

您可以以百分比指定笔划宽度，而不仅仅是用户空间单位。您还可以以相同的方式指定阴影过滤器（以 objectBoundingBox 为单位）。这会将您的笔画大小调整为 svg 的大小与视图框的大小。

【讨论】：

【解决方案2】：

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

这可以解决中风问题。

输出：

【讨论】：

所以最好的（和干净的）方法是单独计算每个 SVG 的描边和阴影？不是很舒服：/
我可能没有解决您的问题，但是如果您在 svg 文件中有多个 "
问题是大小，看viewBox。图标 A viewBox="0 0 500 500" 和图标 B viewBox="0 0 50 50"。我所有的 SVG 都有不同的尺寸。 Icon C viewBox="0 0 120 120", icon D viewBox="0 0 330 330" 等。当我现在将图标调整为 500px500px（使用 SVG 属性的宽度和高度）时，笔划也会调整大小。
您可以尝试在外部 css 文件中添加 svg 图像的大小和笔画，并从您的路径中调用它。此处示例：jsfiddle.net/tqef7qkp/1