filter:drop-shadowが効かない

svgファイルにアニメーションに影の指定をしているんですが、効かないです。
どこが悪いでしょうか？

コード<!doctype html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>パクcafe</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/logo_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(function(){
$.backstretch(
	["img/header_1.jpg",
     "img/header_2.jpg"], 
	{duration: 5000, fade: 1250}
);
});
</script>
</head>
<body>
 <header>
  <nav class="globalmenu">
	<ul>
	 <li>コンセプト</li>
	 <li>メニュー</li>
	 <li>アクセス</li>
	 <li>お問い合わせ</li>
	</ul>
  </nav>
<div class="container">
 <svg id="svg_logo" data-name="svg_logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 302.39 262.05" preserveAspectRatio="xMinYMin meet" x="50%" y="50%" width="50%">
 <title>svg_2</title><path class="cls-1" d="M370,168a26.77,26.77,0,0,0-23.6-21.71,18.32,18.32,0,0,0-27.09-21.7,19,19,0,0,0-24.82-2.46,20.6,20.6,0,0,0-33.79,12.14,35.92,35.92,0,0,0-27.07,34.82" transform="translate(-150.64 -115.92)"/><path class="cls-1" d="M384.36,173.62h-165s6.2,38.06,40.36,70.56v28.1H342.2V245.85C377.94,213,384.36,173.62,384.36,173.62Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M169.88,318.51a3,3,0,0,1,1.26.28,2.6,2.6,0,0,1,1.78,2.52q0,2.06-3.67,8.63a60.26,60.26,0,0,1-13.36,16.79,3.56,3.56,0,0,1-2.16,1,1.72,1.72,0,0,1-1.26-.53,1.93,1.93,0,0,1-.63-1.39,2.12,2.12,0,0,1,.42-1.26c.16-.24.77-.91,1.82-2a59.82,59.82,0,0,0,10-15.11c1-2.07,2-4.4,3-7A2.72,2.72,0,0,1,169.88,318.51Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M192.86,316.76a3.43,3.43,0,0,1,2.23,1.19,85.39,85.39,0,0,1,10.84,13q5.77,8.29,5.77,11.37a2.9,2.9,0,0,1-1.36,2.62,3,3,0,0,1-1.64.53,2.79,2.79,0,0,1-2.35-1.26,22,22,0,0,1-1.08-2.07,118.07,118.07,0,0,0-13.39-21.64,3.39,3.39,0,0,1-.84-2C191,317.32,191.64,316.76,192.86,316.76Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M250.68,326.94l14.13-.49q5.28-.17,5.28,3.81,0,2.1-1.89,7.73a63.39,63.39,0,0,1-12.52,21.79,66.83,66.83,0,0,1-21.79,16.43,4.61,4.61,0,0,1-2,.56,1.63,1.63,0,0,1-1.5-.8,2.08,2.08,0,0,1-.39-1.12,2.27,2.27,0,0,1,1.16-1.71c.16-.12.93-.59,2.3-1.4a67.44,67.44,0,0,0,24.66-24.55,56.65,56.65,0,0,0,5.77-13.5,10.61,10.61,0,0,0,.38-1.78c0-.52-.34-.76-1-.74l-14.79.6a57.82,57.82,0,0,1-15.39,16.08,4.36,4.36,0,0,1-2.41,1,1.59,1.59,0,0,1-1.47-.81,2.22,2.22,0,0,1-.39-1.15,2.27,2.27,0,0,1,.74-1.57l2-1.65a51.28,51.28,0,0,0,13.35-17.31,3.07,3.07,0,0,1,2.73-2,3.39,3.39,0,0,1,1.61.39A2.47,2.47,0,0,1,250.68,326.94Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M298.76,336.93a14.75,14.75,0,0,1,9.68,3.21,4,4,0,0,1,1.78,2.88,2.22,2.22,0,0,1-.85,1.72,2.63,2.63,0,0,1-1.81.73,3.12,3.12,0,0,1-2.21-1.28,8.41,8.41,0,0,0-6.65-2.77,8.92,8.92,0,0,0-7.4,3.64,10.84,10.84,0,0,0-2.27,6.85,10.4,10.4,0,0,0,3.76,8.27,9,9,0,0,0,6,2.34,9.89,9.89,0,0,0,7.75-3.62,2.19,2.19,0,0,1,1.66-.81,2.64,2.64,0,0,1,2.1,1.05,2.33,2.33,0,0,1,.58,1.54,3.58,3.58,0,0,1-1.34,2.51q-4,3.81-10.63,3.81-8,0-12.27-6.06a15.26,15.26,0,0,1-2.77-9,14.57,14.57,0,0,1,5.07-11.4A14.37,14.37,0,0,1,298.76,336.93Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M354.68,341.83v-2.74a2,2,0,0,1,.56-1.46,2.38,2.38,0,0,1,1.86-.76,2.26,2.26,0,0,1,2.22,1.23,2.4,2.4,0,0,1,.2,1v25.29a2.09,2.09,0,0,1-4.17.12l-.37-4.29a11.89,11.89,0,0,1-6.27,6,10,10,0,0,1-3.9.78,12.5,12.5,0,0,1-10.29-4.69,17.51,17.51,0,0,1-.67-19.61,12.51,12.51,0,0,1,10.9-5.77A12.64,12.64,0,0,1,354.68,341.83Zm0,10.57v-2a8.36,8.36,0,0,0-1.45-4.66,9.4,9.4,0,0,0-5.07-3.82,9.71,9.71,0,0,0-3-.46,8.08,8.08,0,0,0-6.44,2.94,11.15,11.15,0,0,0-2.53,7.55,11.72,11.72,0,0,0,2.12,7.08,8.07,8.07,0,0,0,6.85,3.53,8.69,8.69,0,0,0,6.79-3.44A10.21,10.21,0,0,0,354.68,352.4Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M388.89,337.89V331.1a7.5,7.5,0,0,1,1.87-5.21,8,8,0,0,1,6.26-2.57,8.7,8.7,0,0,1,6.07,2.3,3.74,3.74,0,0,1,1.48,2.68,2.2,2.2,0,0,1-1.05,2,2.9,2.9,0,0,1-1.45.37,2.22,2.22,0,0,1-2.1-1.37,3.11,3.11,0,0,0-3-1.77,2.77,2.77,0,0,0-2.54,1.37,3.92,3.92,0,0,0-.58,2.18v6.79h7.69q2,0,2,2.22a2.27,2.27,0,0,1-.81,1.89,2,2,0,0,1-1.23.38h-7.69v21.86a2,2,0,0,1-.47,1.34,2.43,2.43,0,0,1-2,.9,2.46,2.46,0,0,1-2.07-1,2,2,0,0,1-.41-1.28V342.38h-6.44a1.91,1.91,0,0,1-1.31-.47,2.19,2.19,0,0,1-.78-1.8,2,2,0,0,1,1.1-2,2.07,2.07,0,0,1,1-.24Z" transform="translate(-150.64 -115.92)"/><path class="cls-2" d="M428.21,352.87a10.19,10.19,0,0,0,1.69,5.54,9.41,9.41,0,0,0,8.24,4.11,13,13,0,0,0,8.69-3.15,3,3,0,0,1,1.92-.82,2.35,2.35,0,0,1,1.69.73,2.4,2.4,0,0,1,.7,1.72,3.54,3.54,0,0,1-1.63,2.59q-4.32,3.42-11.4,3.41a15.28,15.28,0,0,1-8.8-2.53,13.84,13.84,0,0,1-5.27-6.65,16.16,16.16,0,0,1-1.08-5.94,14.83,14.83,0,0,1,3.5-9.94,14.31,14.31,0,0,1,11.42-5,14.16,14.16,0,0,1,10,3.82,11.4,11.4,0,0,1,4,8.65c0,2.32-1,3.47-3,3.47Zm.23-3.93h17c.62,0,.93-.27.93-.79a6,6,0,0,0-1-2.86c-1.58-2.62-4.1-3.93-7.58-3.93a9.46,9.46,0,0,0-7.11,2.86A8.06,8.06,0,0,0,428.44,348.94Z" transform="translate(-150.64 -115.92)"/><polygon class="cls-1" points="248.93 198.29 59.88 169.78 250.64 181.67 248.93 198.29"/><circle class="cls-1" cx="60.95" cy="183.1" r="11.22"/></svg>
	</div><!--container1 -->
 </header>
  
	<div class="container">
		
	<footer>
    </footer>
 </div><!--container2 -->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

css
1コード@charset "utf-8";
2/* CSS Document */
3.cls-1,.cls-2 {
4  stroke: #000;
5  stroke-width: 2;
6  fill:#fff;
7  fill-opacity: 0;
8  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
9  -webkit-animation: SVG-anim01 1s 1s ease 1;
10          animation: SVG-anim01 3s 1s ease 1;
11  -webkit-animation-fill-mode: forwards;
12          animation-fill-mode: forwards;
13  stroke-dasharray: 500;
14  stroke-dashoffset: 500;
15}
16@-webkit-keyframes SVG-anim01 {
170% {
18  stroke-dashoffset: 500;
19}
2080% {
21  fill-opacity: 0;
22  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
23  stroke-dashoffset: 0;
24}
25100% {
26  fill-opacity: 1;
27  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
28}
29}
30@keyframes SVG-anim01 {
310% {
32  stroke-dashoffset: 500;
33}
3480% {
35  fill-opacity: 0;
36  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
37  stroke-dashoffset: 0;
38}
39100% {
40  fill-opacity: 1;
41  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
42}
43}

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Chrome/SafariではSVG要素内部の個々のグラフィックノード（ここではpath要素）に対するCSSフィルタが, アニメーション以前にそもそも有効とならないようです.

NOTE:
FireFoxでは動作しています.

そのため, 例えば次のようにグラフィック全体を表すsvg要素に対してフィルタを掛けるようにしたら如何でしょうか？(とは言え, グラフィックの構成上対処が難しいことも考えられます.)

svg/*.cls-1,.cls-2*/ {
  stroke: #000;
  stroke-width: 2;
  fill:#fff;
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
  -webkit-animation: SVG-anim01 1s 1s ease 1;
          animation: SVG-anim01 3s 1s ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

投稿2018/04/14 06:22