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

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

ただいまの
回答率

90.51%

  • JavaScript

    16424questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8973questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5786questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • SVG

    100questions

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

svg要素に対してsvgでマスクしてループアニメーションしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 835
退会済みユーザー

退会済みユーザー

![イメージ説明

マスクされる要素

    <svg width="399" height="77" viewBox="-855 -699 399 77" xmlns="http://www.w3.org/2000/svg">
    <path d="M-854.84-696.8h25.376l15.6 25.584 15.6-25.584h25.376v72.8h-24.232v-36.088l-16.744 25.896h-.416l-16.744-25.896V-624h-23.816v-72.8zm128.44 52.832c2.288011 0 4.367991-.450662 6.24-1.352 1.872009-.901338 3.46666-2.097326 4.784-3.588 1.31734-1.490674 2.322663-3.206657 3.016-5.148.693337-1.941343 1.04-3.986656 1.04-6.136v-.208c0-2.149344-.363996-4.21199-1.092-6.188-.728004-1.97601-1.75066-3.726659-3.068-5.252-1.31734-1.525341-2.911991-2.738662-4.784-3.64-1.872009-.901338-3.986655-1.352-6.344-1.352-2.288011 0-4.367991.450662-6.24 1.352-1.872009.901338-3.46666 2.097326-4.784 3.588-1.31734 1.490674-2.322663 3.206657-3.016 5.148-.693337 1.941343-1.04 3.986656-1.04 6.136v.208c0 2.149344.363996 4.21199 1.092 6.188.728004 1.97601 1.75066 3.726659 3.068 5.252 1.31734 1.525341 2.911991 2.738662 4.784 3.64 1.872009.901338 3.986655 1.352 6.344 1.352zm-.208 21.528c-5.616028 0-10.833309-.970657-15.652-2.912-4.818691-1.941343-9.013315-4.61065-12.584-8.008-3.570685-3.39735-6.361323-7.40131-8.372-12.012-2.010677-4.61069-3.016-9.55064-3.016-14.82v-.208c0-5.26936 1.022656-10.20931 3.068-14.82s4.853315-8.631983 8.424-12.064c3.570685-3.432017 7.782642-6.13599 12.636-8.112 4.853358-1.97601 10.087972-2.964 15.704-2.964s10.833309.970657 15.652 2.912c4.818691 1.941343 9.013315 4.61065 12.584 8.008 3.570685 3.39735 6.361323 7.40131 8.372 12.012 2.010677 4.61069 3.016 9.55064 3.016 14.82v.208c0 5.26936-1.022656 10.20931-3.068 14.82s-4.853315 8.631983-8.424 12.064c-3.570685 3.432017-7.782642 6.13599-12.636 8.112-4.853358 1.97601-10.087972 2.964-15.704 2.964zm46.488-74.36h22.776l25.896 32.136V-696.8h24.128v72.8h-21.632l-27.04-33.592V-624h-24.128v-72.8zm81.12 0h62.088v19.968h-38.168v7.384h35.568v17.576h-35.568v7.904h38.688V-624H-599v-72.8zm90.792 47.008l-27.456-47.008h27.248l12.48 23.92 12.584-23.92h26.936l-27.456 46.696V-624h-24.336v-25.792z" fill-rule="evenodd"/>
    </svg>

マスク

    <svg width="420" height="63" viewBox="-877 -350 420 63" xmlns="http://www.w3.org/2000/svg">
    <g fill="#C6C6C6" fill-rule="evenodd">
    <path d="M-877-350h36v52h-36zM-807-350h36v52h-36zM-737-350h36v52h-36zM-667-350h36v52h-36zM-597-350h36v52h-36zM-527-350h36v52h-36z"/>
    <path d="M-843-339h36v52h-36zM-773-339h36v52h-36zM-703-339h36v52h-36zM-633-339h36v52h-36zM-563-339h36v52h-36zM-493-339h36v52h-36z"/>
    </g>
    </svg>


添付の画像のように
文字(SVG要素)に対して凹凸要素(svg)でマスクしたいです。
また、そのマスクした要素だけ横移動(ループ)したいです。

マスクされる要素をsvgにしているのはcssでfillを変更したい為です。

よろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

SVGのAnimationタグで行けそうな気がします。

とは言いつつも、SVGでゴリゴリアニメーションを書いていたのがもう2年前なので、具体例をここでさくっとコーディングできません。申し訳ございません。

代わりと言ってはなんですが、自分のgithubに昔「全部SVGで構築した昔のFlashだけで構築したようなページを作ろうとした残骸(FullSVGWebPage/menu_item at master · manzyun/FullSVGWebPage)」が残っているので、それを参考にしつつ、それとsvg要素の基本的な使い方まとめを一読すると、実現できるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • JavaScript

    16424questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8973questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5786questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • SVG

    100questions

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