「cat-svg」を開いても動画内に表示されるソースコードが表示されない

  • 投稿日
  • 著者 rokunana67
  • カテゴリー 未分類

質問 / JavaScript講座Advance / 教程8 単元5「SVGファイルを読み込んでアニメーションさせよう」

動画3:30あたり、「cat-svg」を開くと、松下講師が出しているようなソースコードが表示されません。なぜか猫のシルエットみたいなものが表示されてしまいます。そのために、先の工程に進めません。松下講師の説明では、HTMLの<div>属性の中にあるcatクラスの中で、とりあえず<img =”cat.svg”>と書いて表示してくださいとのことだったので、その通りにしたら、猫は表示されましたが…。そのあとで、ファイル内にある「cat.svg」は削除してくださいとのことでしたが、ソースコードがない限り、それもできず先に進めません。なにか方法はございますでしょうか？

Visual Studio Codeのバージョンアップにより、svgの中身がソースとして表示されず、プレビューで表示されるようになったようです。

VS Code 最新版でSVGファイルを編集できるようにする

こちらを参考に設定変更してみてください。

  1. VS Codeの設定ファイル（settings.json）を開く
    　- Mac：⌘ + Shift + P → Preferences: Open Settings (JSON)
    　- Win：Ctrl + Shift + P → Preferences: Open Settings (JSON)

  2. 以下を追記（または上書き）：
    “workbench.editorAssociations”: {“*.svg”: “default”}

  3. ファイルを保存して、VS Codeを再起動

  4. SVGファイルを開くと、画像ではなくXML形式のソースコードが表示されます

  5. ソースをHTML内に貼り付ける作業が可能になります（講座の次工程に進めます）

javascript

この記事を書いた人

rokunana67

記事一覧