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

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

ただいまの
回答率

90.47%

  • CSS3

    2137questions

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

  • SVG

    101questions

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

filter:drop-shadowが効かない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 425

yesman

score 6

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>
コード@charset "utf-8";
/* CSS Document */
.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;
}
@-webkit-keyframes SVG-anim01 {
0% {
  stroke-dashoffset: 500;
}
80% {
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
  stroke-dashoffset: 0;
}
100% {
  fill-opacity: 1;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
}
}
@keyframes SVG-anim01 {
0% {
  stroke-dashoffset: 500;
}
80% {
  fill-opacity: 0;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,0));
  stroke-dashoffset: 0;
}
100% {
  fill-opacity: 1;
  filter:drop-shadow(10px 10px 1px rgba(0,0,0,.5));
}
}


よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

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 15:26

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

    キャンセル

関連した質問

  • 解決済

    SVGの整列について

    現在、SVGで整列の処理を作成しているのですが、 以下図のように回転させると、灰色の部分で整列してしまうのですが、 矩形(青紫の箇所)で整列することは可能でしょうか? j

  • 解決済

    CSSで文字を震えさせるには?

    CSS、HTML勉強中の者です。 現在文字にカーソルを合わせると文字が震えるようなものを作りたいと思っていますが、:hoverをどのようにつかえば文字が震えるのかがわかりませんの

  • 解決済

    画面配置を固定したい。常に中央に来るように

    テキストテンプレートがウィンドウのサイズを縮めた時に移動して、 画像の上に勝手に来てしまいます。 また、画像が中央に常に設置されているにも関わらず、テキストテンプレ

  • 解決済

    矢印のアニメーションの動き方

    <!--矢印の為のコード二つ--> <div id="arrow"> <a href="#" class="arrow_top" ><span></span></a> <

  • 解決済

    バーを円形に動かしたい。

    動画のように https://www.youtube.com/watch?v=tXGfq2AEviY&feature=youtu.be 青いバーを円形に動かしたいです。 以下の

  • 解決済

    バーを円形に動かしつつ、背後にグラデーションカラーをつけたい。

    動画のように、青いグラデーションとともにバーを円形に回転させたいです。 https://www.youtube.com/watch?v=u-BWupHzTnU バーを回転させる

  • 解決済

    D3.jsにおいて、開閉するtreeグラフを複数表示する方法

     前提・実現したいこと JavaScript(D3.js)でこちらのURL(D3.js v4/v5 treeを開閉する方法 – サンプル)を参考にして、開閉するグラフを作成していま

  • 解決済

    css 台形に画像をトリミング

    最新ブラウザのみでいいのですが、 画像を台形にトリミングしたいのですが、 IEもできる方法わかりませんでしょうか? clip-pathやsvgなどでやっていたのですが、IEだけどう

同じタグがついた質問を見る

  • CSS3

    2137questions

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

  • SVG

    101questions

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