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

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

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

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

Q&A

解決済

1回答

560閲覧

WordPressでSVGファイルが表示されない&動かない

yuuki926

総合スコア1

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/11/28 06:29

実現したいこと

・SVGファイルを使って動くシェイプのアイコンを作りたい

前提

初心者です。
WordPressの「SWELL」でサイトを作っています。
こちらの記事を参考にして作ろうと思ったのですが、うまく行きません。
https://point-of-view.blog/swell-tips-svg-morphing-customize/

SVGファイルをメディアにアップロードすることはできたのですが、
固定ページで貼り付けるとなぜか動いていません。

なぜなのでしょうか?
ちなみにSVGをアップロードできるようになるプラグインは導入済みです。

発生している問題・エラーメッセージ

エラーメッセージ Failed to load resource: the server responded with a status of 404 ()

該当のソースコード

ソースコード

試したこと

他のSVGファイルで試したところ挿入できるものもあれば、できないものもありました。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

Lhankor_Mhy

2023/11/28 06:47

404 であれば、一番ありそうなのはURLが間違っているとかでしょうか。
yuuki926

2023/11/28 06:54

それ以前にメディアにアップロードするとアニメーションが動いていません…
Lhankor_Mhy

2023/11/28 07:02

> それ以前にメディアにアップロードするとアニメーションが動いていません… ということは、逆に言うと、動かないけど表示されているということなのですね? であれば、404のエラーメッセージは別の関係のないエラーかもしれませんね。 メディアとはサーバのことでしょうか? ローカルでは動いていますか? そのSVGのコードを質問に追記することはできますか?
Lhankor_Mhy

2023/11/28 07:05

あ、メディアって、wordpress のメディアのことですか。 ・ローカルではアニメーションする ・メディアのライブラリのプレビューではアニメーションしない ということですか?
yuuki926

2023/11/28 07:06

ありがとうございます。 SVGファイルをブラウザで表示させると動いているのですが、 WordPressの管理画面のメディアへアップロードすると止まってしまっています。 コードはこちらです。 <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path fill="#000000" d="M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z" transform="translate(100 100)"> <animate attributeType="XML" attributeName="d" dur="8s" repeatCount="indefinite" values=" M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z; M69.3,-23.5C77.7,3.2,63.9,36.2,40.3,52.7C16.7,69.1,-16.8,69.2,-39.4,53.1C-62,36.9,-73.7,4.6,-65.3,-22.1C-56.9,-48.8,-28.4,-69.9,1,-70.3C30.5,-70.6,61,-50.2,69.3,-23.5Z; M65.8,-22.5C74,3.9,61.7,36,38.3,53.1C14.9,70.1,-19.6,72.3,-43.5,55.9C-67.3,39.5,-80.5,4.6,-71.4,-23C-62.4,-50.5,-31.2,-70.6,-1.2,-70.2C28.8,-69.9,57.6,-49,65.8,-22.5Z; M66.9,-21.1C76.4,7.4,66.6,42.9,42.7,60.8C18.7,78.7,-19.5,79.1,-42.9,61.5C-66.3,44,-74.9,8.4,-65.3,-20.3C-55.7,-49,-27.8,-70.9,0.4,-71.1C28.7,-71.2,57.4,-49.6,66.9,-21.1Z; M69.2,-21.6C77.7,3.6,64.3,36.8,41.1,52.8C17.8,68.8,-15.2,67.6,-37.3,51.6C-59.3,35.5,-70.4,4.5,-62.4,-20.1C-54.3,-44.7,-27.2,-62.9,1.6,-63.4C30.4,-63.9,60.7,-46.8,69.2,-21.6Z; M62,-19.2C71,7.4,62.4,40.8,40.1,57.5C17.9,74.1,-18,74.2,-41.1,57.3C-64.2,40.4,-74.4,6.4,-65.4,-20.3C-56.4,-47,-28.2,-66.4,-0.8,-66.2C26.5,-65.9,53.1,-45.9,62,-19.2Z; M68.7,-24.9C76.2,0.7,60.5,31.3,36.2,48.7C11.8,66.1,-21.2,70.4,-43.8,55.2C-66.3,40,-78.4,5.3,-69.3,-22.4C-60.3,-50.1,-30.1,-70.9,0.2,-71C30.6,-71,61.2,-50.4,68.7,-24.9Z" /> </path> </svg>
Lhankor_Mhy

2023/11/28 07:11

メディアでの表示については、サムネイル生成された際にファイル形式が変換されているんじゃないかな、という気がしてます。 そちらはあまり気にせずにページでの表示を修正する方向で対応してはいかがでしょうか。
yuuki926

2023/11/28 07:15

実際に固定ページへ貼り付けると真っ白な状態になってしまいます…
Lhankor_Mhy

2023/11/28 07:16

なるほど。 ・ローカルではアニメーションする ・メディアのライブラリのプレビューではアニメーションしない ・固定ページでは表示されない ということですね。 そうだとすると、元に戻って404エラーかもしれません。URLが正しいかどうか確認してみてはどうでしょうか。
yuuki926

2023/11/28 07:20

どこのURLを確認して、どう正しいのかどう誤りがあるのかがわかりません。 初心者で申し訳ありません。よろしくお願いいたします。
Lhankor_Mhy

2023/11/28 07:28

Chrome であれば、要素の上で右クリックをして「検証」とすると、devtool が開きます。 参考にしたサイトの通りだとすると、アイコン画像にCSSでマスクがかかっていると思いますから、スタイルの欄を見てマスクに書かれているURLの上にマウスカーソルを当てると、正常に読み込まれているかどうかわかると思います。
yuuki926

2023/11/28 07:33

ありがとうございます。 正常にマスクはかかったのですが、 動かず止まったままになっています。
yuuki926

2023/11/28 07:37

WordPressに読み込んだ時点で動いてなかったので もしかしたら大元の設定などを変えなくてはいけないのでしょうか?
Lhankor_Mhy

2023/11/28 07:41

> 正常にマスクはかかった おめでとうございます。 これは何をしたらそうなりましたか? > WordPressに読み込んだ時点で動いてなかったので > もしかしたら大元の設定などを変えなくてはいけないのでしょうか? では、次にマスクSVGをそのページからダウンロードして、ローカルのものと同一かどうか確認してみてはいかがでしょうか。
yuuki926

2023/11/28 07:46

ありがとうございます! CSSコードで画像パスのhttp〜あたりを消したらなりました。 名前をつけて保存するとSVGファイルではなく、webpという拡張子でDLされてしまいます。
Lhankor_Mhy

2023/11/28 07:56

もしかして、画像を自動的にWebPに変換して読み込みを早くするプラグインとか使ってないですか?
yuuki926

2023/11/28 07:59

まえはAutoptimize使ってましたが 今は無効化してあります。
yuuki926

2023/11/28 08:04

SVG SupportというSVGファイルを読み込めるようにするプラグインは使っています・
Lhankor_Mhy

2023/11/28 08:04

うーん、では、uploads ディレクトリに元々のSVGファイルがあるかどうか確認してみてはどうでしょう? パスさえわかればいいはずなので。
yuuki926

2023/11/28 08:15

ファイルマネージャでwp-contentの中を探してみたんですが、SVGファイルが見つかりませんでした… これってつまりアップロードされてないってことなんでしょうか?
Lhankor_Mhy

2023/11/28 08:28

WebPの方はありました? それであれば変換されてしまっているんでしょうね。
yuuki926

2023/11/28 08:37

よく探したらSVGファイル見つかりました!
yuuki926

2023/11/28 08:45

ちなみにパスは合っていました。
Lhankor_Mhy

2023/11/28 09:03

見つかったファイルはローカルにあったものと同じでしたか?
yuuki926

2023/11/28 09:05

はい。同じでした。
Lhankor_Mhy

2023/11/28 09:14

ファイルが同じもので、パスも間違っていないのに、WebPが落ちてくるんですか???
yuuki926

2023/11/28 09:17

はい。ブラウザ上で名前をつけて保存すると拡張子はwebpでした。
guest

回答1

0

ベストアンサー

単体で動くSVGであればサイトにアップしても動くはずです
変なデータを参照する設定になっていないか確認してみてください

追記

https://codepen.io/yamowo/embed/mdMbNaQ
のHTMLの部分をコピペするのであれば、動作すると思います
少なくとも私の環境ではで動作しました

マスクサンプル

CSS

1<style> 2.masked { 3 width: 300px; 4 height: 300px; 5 background-color:gray; 6 mask-image: url(sample.svg); 7 -webkit-mask-image: url(sample.svg); 8} 9</style> 10<div class="masked"> 11aaaaaaaaaaaaaaaaaaaaaaaaaa<br> 12bbbbbbbbbbbbbbbbbbbbbbbbbb<br> 13cccccccccccccccccccccccccc<br> 14dddddddddddddddddddddddddd<br> 15eeeeeeeeeeeeeeeeeeeeeeeeee<br> 16ffffffffffffffffffffffffff<br> 17</div>

特に問題ないようです

投稿2023/11/28 06:44

編集2023/11/28 09:10
yambejp

総合スコア114389

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

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

yuuki926

2023/11/28 06:51

変なデータを参照する設定になっていないか確認してみてください →こちらの設定はどちらで確認できるのでしょうか??汗
yambejp

2023/11/28 07:37

ソース見てみたのですが特に問題なさそうですよ
yuuki926

2023/11/28 08:47

なぜかWordPressへアップロードすると動かないんです。
yambejp

2023/11/28 08:53

「アップロード」とは何をしたのかわかりません HTMLにタグで貼るんですよ? svgというファイルに保存して参照したいなら <object data="sample.svg" type="image/svg+xml" width="100" height="100"></object> みたいにします
yuuki926

2023/11/28 08:55

SVGファイルをメディアへアップロードして そのファイルをマスクして使いたいんです。
yambejp

2023/11/28 08:57

どうやってSVGファイルを参照しているかわかりません。
yuuki926

2023/11/28 09:00

CSS用コードに下記のように画像パスを入れてます。 まずそもそもSVGファイルをメディアへアップロードした時点で動いていないので プラグインとかが邪魔しているのでしょうか? 他のSVGデータはアップロードした時、動いていたので… figure.pickup-minimal img { -webkit-mask-image: url(/wp-content/uploads/2023/11/shape-01-8s.svg); mask-image: url(/wp-content/uploads/2023/11/shape-01-8s.svg); -webkit-mask-size: 260px; mask-size: 260px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
yambejp

2023/11/28 09:11 編集

追記しましたがマスクとしても普通に動作しますね 単純にsvgファイルの参照場所が違うのでは?
yuuki926

2023/11/28 09:19

マスクとしては動作しています。 ただ、動きが止まっている状態です。
yambejp

2023/11/28 09:30

動作環境はなんでしょう? winのchrome/edge/firefoxでは普通にマスクとしてアニメーションしてますよ
yuuki926

2023/11/28 09:31

MacのChromeです。
yuuki926

2023/11/28 09:36

できました!!プラグインの設定をいじっていたらできました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.53%

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

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

質問する

関連した質問