質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.36%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

2722閲覧

filter:drop-shadowが効かない

yesman

総合スコア21

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1グッド

1クリップ

投稿2018/04/14 05:26

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}

よろしくお願いします。

defghi1977👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yesman

2018/04/14 06:26

ご連絡ありがとうございます! svgに対して条件を入れたら表示できました。 勉強になりました。 ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問