imageタグをappendしようとした際にimgに自動変換される問題

前提条件

とある要素の下に<image>タグを挿入し用としたところ、自動で<img>タグに変換されてしまいます。<image>を入れたい場合にはどうすれば良いのでしょうか？

コード

html
1<div>
2    <svg id="svg-prev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1015 568">
3        <defs>
4            <pattern id="rs" height="100%" width="100%" patternContentUnits="objectBoundingBox">
5            </pattern>
6        </defs>
7    </svg>
8</div>

js
1$(window).load(function () {
2　　　$("#rs").append('<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://d1f5hsy4d47upe.cloudfront.net/7b/7b90d80b9fb3820e8d19884514a141bc_w.jpg" />');
3});

↓レンダリングされるhtml

html
1<div>
2    <svg id="svg-prev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1015 568">
3        <defs>
4            <pattern id="rs" height="100%" width="100%" patternContentUnits="objectBoundingBox">
5                <img height="1" width="1" preserveAspectRatio="none" xlink:href="https://d1f5hsy4d47upe.cloudfront.net/7b/7b90d80b9fb3820e8d19884514a141bc_w.jpg" />
6            </pattern>
7        </defs>
8    </svg>
9</div>

よろしくおねがいします。

追記

正確にいうとsvgのなかで使用しています。その為<image>タグである必要があります。
動的にsvgのpattern要素を定義する為にimageタグが必要になります。

参考
https://developer.mozilla.org/ja/docs/Web/SVG/Element/pattern
https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image

yambejp

2020/06/26 08:59 編集

SVGの質問に「<div id="rs">」とか絶対に駄目です（svgにrsというidをふってあるんですよね？） SVGタグの表記がどうなっているかが今回は最重要なポイントなのでそこは適当に置き換えないでください

muteki_gamer

2020/06/26 09:08

あくまでjsの問題なので、無駄な部分を意識させないように質問を簡略化しただけのつもりです。回答で使うなと言われたのでSVGで使ってる為、使わざるを得ないと追記しました。 SVGに直したので、これで大丈夫かと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLにimage要素は無いのでそうなってもおかしくはないです。

【<image>: 廃止された画像要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/image

一般に、ブラウザーはこの要素を src 属性が正しく設定されていた場合のみ、 <img> に変換しようとします。 src 属性なしで <image> 要素を作成すると、局所的な要素名を "image" とした HTMLElement オブジェクトが生成されます。しかし、 src 属性付きで要素が作成された場合、 HTMLImageElement となって要素名が "img" に変換されます。

しかし、これは使用してよいという意味ではありません。使用してはいけません。

投稿2020/06/26 08:08

kei344

総合スコア69416

muteki_gamer

2020/06/26 08:15

htmlで使っているというのが誤解を生んだかもしれません。正確にいうとsvgのなかで使用しています。動的にsvgのfill要素を定義する為にimageタグが必要になります。参考 https://developer.mozilla.org/ja/docs/Web/SVG/Element/image https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image