Q&A
svgを単体で読んでもとくになにも表示されませんけど・・・
前提・実現したいこと
objectタグ内のsvgファイルの色（fill="black")とサイズ(width="50" height="50"をそれぞれ100に）を変更したいです。
svgファイル内の記述を直接書き換えるのではなく、javascriptを使って外部から書き換えたいのですが、どうすればいいですか？
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>sample</title> 6</head> 7<body> 8<object type="image/svg+xml" data="u9089-ue0100.svg"></object> 9</body></html>
svg
1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 200 200" width="50" height="50"> 2<g fill="black"> 3<path d="M 101.0 133.0 L 101.0 153.0 L 150.0 153.0 L 150.0 133.0 Z M 166.9 138.1 L 163.79775276184083 135.5617977142334 L 162.0 137.0 L 162.0 159.0 L 150.0 165.0 L 150.0 157.0 L 101.0 157.0 L 101.0 164.0 L 90.15102043151856 169.42448978424073 L 98.6 170.6 L 113.0 171.6 L 130.9 171.9 L 152.6 171.5 L 178.7 170.4 L 190.0 169.9 L 179.2 183.5 L 152.9 184.0 L 130.7 183.7 L 112.3 182.6 L 97.2 180.8 L 85.0 178.1 L 75.1 174.6 L 67.2 170.3 L 61.1 165.3 L 56.4 159.6 L 54.27821521759033 155.8868766784668 L 52.0 158.1 L 48.4 161.5 L 44.9 164.6 L 41.3 167.7 L 37.7 170.6 L 26.9 178.7 L 23.323113918304443 181.18394861221313 L 23.1 185.2 L 19.8 183.6 L 12.1 174.3 L 13.8 173.3 L 17.6 171.4 L 21.4 169.6 L 29.2 165.6 L 33.2 163.6 L 37.2 161.5 L 44.0 158.1 L 44.0 109.0 L 14.0 109.0 L 14.0 105.0 L 44.0 105.0 L 50.0 100.0 L 61.0 109.0 L 56.0 113.0 L 56.0 153.70384616851806 L 59.5 156.8 L 64.9 160.7 L 70.8 164.1 L 78.0 166.8 L 87.1 169.0 L 89.0 169.26434783935548 L 89.0 133.42666664123536 L 86.6 135.4 L 81.7 139.0 L 76.4 142.4 L 70.7 145.7 L 64.4 148.7 L 63.5 147.2 L 68.5 142.6 L 73.1 138.2 L 77.5 133.9 L 81.5 129.8 L 85.1 125.7 L 88.3 121.7 L 91.1 117.7 L 93.5 113.8 L 95.5 110.0 L 96.7093023300171 107.20348834991455 L 96.7 107.2 L 97.6 105.1 L 107.9 111.4 L 109.8 114.5 L 105.77373819351196 114.91650981903076 L 105.3 115.7 L 102.4 119.9 L 99.0 123.9 L 96.31379308700562 126.65689659118652 L 101.0 129.0 L 150.0 129.0 L 153.69924812316896 125.91729326248169 L 151.4 123.2 L 148.4 119.2 L 145.9 115.0 L 144.0 110.7 L 142.82272729873657 107.0 L 116.0 107.0 L 116.0 103.0 L 137.8181818008423 103.0 L 146.0 94.0 L 156.0 103.0 L 156.0 107.0 L 145.85161294937134 107.0 L 147.4 108.5 L 150.6 111.5 L 153.9 114.5 L 157.3 117.4 L 160.9 120.2 L 164.8 123.0 L 169.0 125.6 L 173.4 128.2 L 178.1 130.7 L 183.1 133.1 L 188.1 135.8 L 176.8 144.8 L 171.7 141.5 Z M 68.4 113.5 L 65.7 109.8 L 66.3 105.3 L 67.8 103.5 L 69.1 101.6 L 70.2 99.6 L 71.0 97.6 L 71.7 95.4 L 72.2 93.1 L 72.5 90.6 L 72.5 88.0 L 72.4 85.1 L 71.6 82.2 L 73.2 81.5 L 74.7 84.2 L 76.4 86.9 L 77.0 88.3 L 77.0 88.0 L 171.0 88.0 L 171.47872343063355 87.60106382369995 L 171.5 87.5 L 171.5649582862854 87.52920141220093 L 177.0 83.0 L 188.0 92.0 L 183.0 95.0 L 179.3744680404663 96.51063833236694 L 176.8 99.6 L 173.4 103.4 L 171.6 105.4 L 169.6 107.3 L 167.5 109.2 L 165.7 111.4 L 164.2 110.5 L 165.5 107.9 L 166.4 105.2 L 168.0 100.2 L 168.8 97.9 L 169.4 95.6 L 170.1 93.5 L 170.45714282989502 92.0 L 78.39310340881347 92.0 L 78.6 92.6 L 79.2 95.7 L 79.4 98.8 L 79.3 101.9 L 78.8 105.1 L 77.9 108.3 L 76.6 111.5 L 72.9 114.1 Z M 38.3 77.2 L 36.1 74.7 L 33.7 72.2 L 31.2 69.7 L 28.5 67.3 L 25.7 65.0 L 22.8 62.6 L 19.8 60.3 L 16.5 58.2 L 17.2 56.5 L 21.1 57.6 L 24.9 58.6 L 28.6 60.0 L 32.2 61.5 L 35.7 63.3 L 39.1 65.2 L 42.4 67.3 L 45.5 69.6 L 48.6 72.1 L 51.5 74.7 L 52.9 79.1 L 50.9 83.2 L 46.6 84.6 L 42.5 82.6 L 40.5 79.9 Z M 133.5 24.9 L 134.2 28.4 L 129.77659578323363 27.3135498046875 L 127.9 28.4 L 126.0 29.6 L 124.0 30.8 L 122.0 31.9 L 119.9 33.1 L 118.1 34.0 L 159.0 34.0 L 165.0 29.0 L 176.0 38.0 L 171.0 42.0 L 171.0 77.0 L 159.0 83.0 L 159.0 77.0 L 94.0 77.0 L 82.0 83.0 L 82.0 28.0 L 94.0 34.0 L 113.5555555343628 34.0 L 114.0 33.5 L 115.2 31.4 L 117.8 27.4 L 119.0 25.5 L 120.3 23.6 L 121.5 21.8 L 122.7 19.9 L 123.9 18.2 L 124.47931585311889 17.25202865600586 L 124.3 17.1 L 125.3 16.1 Z M 94.0 63.0 L 94.0 73.0 L 159.0 73.0 L 159.0 63.0 Z M 94.0 50.0 L 94.0 59.0 L 159.0 59.0 L 159.0 50.0 Z M 47.9 41.9 L 46.0 39.3 L 43.9 36.8 L 41.6 34.3 L 39.1 31.8 L 36.5 29.4 L 33.7 26.9 L 30.7 24.4 L 27.5 22.2 L 28.2 20.6 L 32.1 21.8 L 35.9 23.1 L 39.5 24.6 L 43.0 26.2 L 46.4 28.1 L 49.6 30.2 L 52.7 32.4 L 55.6 34.7 L 58.3 37.3 L 61.0 40.0 L 62.0 44.4 L 59.8 48.4 L 55.3 49.4 L 51.4 47.2 L 49.7 44.5 Z M 94.0 38.0 L 94.0 46.0 L 159.0 46.0 L 159.0 38.0 Z " /> 4</g> 5</svg> 6
回答1件
0
単純に
HTML
1<object type="image/svg+xml" data="hoge.svg" height="100" width="100"></object>
もしくはstyle="height:100px;width:100px"
投稿2020/03/16 05:37
編集2020/03/16 05:45総合スコア116724
あっと、色も変えるんでしたね
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('object').addEventListener('load',e=>{
var svg=e.target;
svg.setAttribute("width",100);
svg.setAttribute("height",100);
var g=svg.contentDocument.querySelector('g');
g.setAttribute("fill","red");
});
});
あなたの回答
tips
プレビュー
