CSS-эффект (тень, обводка) на SVG разных размеров

Question

CSS-эффект (тень, обводка) на SVG разных размеров

у меня проблема с SVG (разные размеры) и effetcs (штрихи, тени и т. д.)
Штрих (например) имеет разный размер, потому что значок B меньше, и он «увеличен» до 500 пикселей.

Как правильно решить эту проблему?

я должен рассчитать эффект для каждого 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">

0

php size stroke svg vector

Решение

Другие решения

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

Это может исправить проблему с инсультом.

Выход: введите описание изображения здесь

0

Источник

Accepted Answer

Вы можете указать ширину штриха в процентах, а не только в единицах пространства пользователя. Вы также можете указать теневые фильтры таким же образом (в единицах objectBoundingBox). Это изменит размер ваших ударов по размеру ваших svg по сравнению с размером ваших viewboxes.

1