dqqg0811 2014-11-22 00:35
浏览 184
已采纳

具有不同大小的SVG上的CSS效果(阴影,笔画)

i have a problem with SVGs (different sizes) and effetcs (strokes, shadows etc.) The stroke (for example) has not the same size because the icon B is smaller and it is "zoomed" to 500px.

What is the correct way to fix this issue?

  • must i calculate the effect for every SVG individually? :/
  • or is there an option to only zoom the SVG and not the effect?
  • or can i recalculate (with PHP) the SVGs? So that every SVG has the same size?

FIDDLE
http://jsfiddle.net/tqef7qkp/

CSS

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

Example 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">
  • 写回答

2条回答 默认 最新

  • doudichu1358 2014-11-22 04:06
    关注

    You can specify stroke-widths in percentages, not just userSpace units. You can also specify shadow filters the same way (in objectBoundingBox units). This will size your strokes to the size of your svg's vs. the size of your viewboxes.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?