CSSのドロップシャドウを反応させるにはどうすればよいですか？

Question

私は以下のドロップシャドウをSVGイメージに適用しました。この問題は、サイトが低解像度に縮小されたときに、影が画像からさらに遠ざかることになります。ドロップシャドウフィルタでは、パーセンテージを使用することはできません。

#turqLogo img 
{ 

display: block; 
margin: auto; 
width: 4%; 
-webkit-filter: drop-shadow(.5em 0px 0px black); /* Chrome, Safari, Opera */ 
filter: drop-shadow(.5em 0px 0px black); 
} 

サイトが異なる解像度で表示されているのと同じ位置に影を残すようにするための秘訣はありますか？

Answer 1

.5emの代わりに1vwを使用してください。

1vw =ビューポート幅の1％。

-webkit-filter: drop-shadow(1vw 0px 0px black); /* Chrome, Safari, Opera */ 
filter: drop-shadow(1vw 0px 0px black); 

例、SVGが影を落としスケーリングしたときに、それは距離だ保つ：

Answer 2

これで画面の幅によってによって影をリセットしてください：

@media (min-width: 300px) { //set there your width 

display: block; 
margin: auto; 
width: 4%; 
-webkit-filter: drop-shadow(.5em 0px 0px black); /* new style here */ 
filter: drop-shadow(.5em 0px 0px black); /* new style here */ 

} 

スタイルシートに追加するだけで、ページがその最小幅に達すると、コンポーネントにスタイルを再適用することがわかります;