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

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

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

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

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

Q&A

解決済

1回答

1212閲覧

SVG画像のpathで描かれた各範囲に背景画像を設定したい

ai_123

総合スコア25

SVG

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

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

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

0グッド

1クリップ

投稿2020/03/26 22:19

svg画像のpathの部分に背景画像のbackground-imageを設定したいのですが、うまくできません。
技術的に可能なのでしょうか?

例えば、wikipediaのsvgで作られた世界地図に、国別で好きな背景を挿入することは可能でしょうか?

html

1<svg> 2<g id="fr"> 3 <g class="land coast fr fx" id="fx"> 4 <path d="M1246.81,392.88C1246.42,392.57 1245.99,392.30 1245.52,392.08C1245.67,392.60 1246.13,392.96 1246.81,392.88" id="path2166" /> 5 <path d="M1254.06,395.85C1253.80,395.43 1253.79,395.27 1253.12,395.39C1253.43,395.54 1253.74,395.70 1254.06,395.85" id="path2168" /> 6 <path d="M1260.65,401.67C1260.32,401.14 1259.45,401.26 1258.93,401.34C1259.52,401.35 1260.10,401.47 1260.65,401.67" id="path2172" /> 7 <path d="M1261.16,404.38C1261.66,403.73 1260.97,402.62 1259.94,403.06C1260.47,403.42 1260.88,403.86 1261.16,404.38" id="path2174" /> 8 <path class="land fr fx" d="M1234.28,387.06C1235.26,386.67 1236.46,386.43 1237.60,386.59C1237.86,385.20 1235.66,386.16 1235.09,385.21C1236.12,384.92 1237.36,385.03 1238.45,385.07C1237.58,384.95 1236.45,385.20 1236.98,384.35C1236.32,384.32 1234.17,385.34 1233.82,384.44C1233.33,383.23 1235.57,382.49 1236.65,382.32C1238.10,382.08 1239.49,381.99 1240.99,382.02C1243.11,382.07 1244.32,380.41 1246.69,380.64C1246.48,381.25 1249.48,383.39 1250.24,383.13C1250.76,382.92 1251.25,382.69 1251.72,382.42C1252.75,381.94 1252.73,382.56 1253.63,382.70C1254.53,382.83 1255.16,382.27 1255.31,383.42C1255.86,383.10 1254.98,382.72 1255.42,382.20C1255.86,381.67 1256.17,382.48 1256.60,382.57C1257.63,382.78 1258.91,382.56 1259.91,382.43C1257.72,381.92 1258.33,379.47 1258.41,378.20C1258.45,377.58 1257.23,376.95 1256.80,376.52C1256.06,375.77 1256.61,374.64 1255.57,374.03C1256.33,374.14 1257.04,374.43 1257.80,374.55C1258.62,374.69 1259.58,374.05 1260.32,374.34C1261.47,374.79 1260.18,376.13 1261.77,376.84C1262.23,377.04 1263.00,376.68 1263.46,376.68C1264.81,376.67 1266.12,377.03 1267.44,377.23C1268.73,377.42 1269.83,377.39 1270.94,376.87C1271.95,376.40 1273.34,376.42 1274.24,375.88C1273.51,376.12 1272.26,376.24 1271.51,375.91C1270.01,375.24 1273.28,373.59 1273.83,373.38C1275.58,372.75 1277.60,372.82 1279.38,372.24C1280.41,371.91 1281.69,369.95 1283.03,370.50C1281.85,369.90 1282.28,365.75 1283.19,364.98C1284.08,364.21 1288.80,362.83 1290.08,363.67C1290.74,364.10 1289.60,365.74 1291.45,366.11C1293.37,366.49 1292.91,366.14 1294.26,366.47C1295.53,366.77 1295.17,367.55 1296.16,367.93C1297.44,368.42 1298.69,367.84 1298.60,369.42C1299.33,369.02 1300.64,369.11 1301.44,369.34C1302.96,369.75 1302.39,371.25 1302.13,372.11C1303.13,372.25 1304.27,372.49 1305.25,372.18C1306.22,371.86 1306.41,370.95 1307.38,370.63C1307.49,371.13 1307.31,373.35 1308.15,373.38C1309.38,373.41 1311.90,374.71 1312.31,375.65C1312.19,375.38 1317.00,376.00 1317.24,376.02C1318.41,376.10 1319.27,375.90 1320.21,376.67C1320.95,377.28 1321.48,378.23 1322.59,378.46C1322.82,378.37 1323.01,378.24 1323.15,378.06C1323.50,377.76 1323.68,378.15 1324.06,378.20C1324.27,378.26 1324.33,378.38 1324.24,378.54C1324.18,378.90 1325.22,378.71 1325.40,378.72C1326.57,378.80 1327.24,378.22 1328.33,378.89C1329.50,379.59 1331.88,379.72 1333.33,379.92C1331.58,381.17 1329.96,382.54 1329.42,384.41C1329.16,385.31 1328.50,386.14 1328.34,387.06C1328.23,387.65 1328.49,387.90 1328.20,388.66C1327.86,389.59 1328.74,390.36 1327.98,390.94C1327.34,391.42 1326.85,391.89 1325.87,391.82C1325.05,391.76 1324.97,390.78 1323.99,391.22C1323.29,391.54 1323.24,392.57 1324.42,392.41C1323.54,393.17 1322.78,394.07 1321.77,394.73C1321.16,395.06 1320.56,395.40 1319.97,395.76C1319.49,396.12 1319.55,396.82 1319.15,397.24C1318.46,397.95 1317.11,398.28 1316.92,399.29C1317.09,399.63 1317.21,399.98 1317.28,400.35C1317.12,401.00 1316.39,401.23 1316.10,401.80C1317.43,401.66 1317.91,401.29 1318.24,400.25C1318.57,399.22 1320.89,399.30 1321.83,399.52C1322.96,399.78 1322.23,401.29 1323.06,402.02C1324.51,403.30 1323.64,403.78 1322.38,404.64C1323.07,405.43 1325.65,406.89 1324.97,408.04C1324.51,408.82 1321.02,409.88 1321.03,410.01C1321.11,410.92 1323.27,411.69 1324.01,412.21C1325.09,412.95 1322.57,414.27 1322.95,415.25C1323.42,416.45 1326.24,417.80 1327.71,417.32C1329.56,416.71 1329.29,417.59 1328.60,418.60C1326.95,421.03 1323.75,422.26 1320.90,423.84C1321.09,424.07 1321.28,424.28 1321.48,424.50C1320.41,424.62 1319.52,425.07 1318.53,425.36C1317.46,425.67 1316.76,425.18 1315.74,425.25C1314.20,425.35 1313.22,424.29 1311.38,424.43C1312.08,422.86 1308.94,424.07 1308.88,423.15C1309.07,422.87 1309.39,422.80 1309.82,422.93C1309.78,422.42 1309.39,422.13 1308.76,422.15C1309.31,422.81 1308.86,422.91 1308.13,422.94C1306.93,422.99 1306.80,422.93 1306.44,421.76C1306.94,424.10 1306.17,422.60 1304.32,422.60C1303.25,422.60 1302.36,422.05 1301.31,422.01C1300.03,421.96 1298.67,423.14 1297.55,423.57C1296.68,423.90 1293.60,424.85 1293.83,425.83C1293.82,426.16 1293.72,426.46 1293.51,426.74C1293.03,427.10 1293.08,427.42 1293.68,427.70C1294.16,428.84 1293.89,429.41 1294.74,430.50C1293.99,430.68 1293.32,430.37 1292.57,430.40C1291.79,430.44 1291.42,430.95 1290.73,431.11C1289.08,431.48 1288.00,430.06 1286.44,431.02C1286.33,431.08 1284.06,430.23 1283.81,430.08C1283.17,429.70 1284.60,429.75 1283.57,429.19C1282.98,428.87 1281.92,428.73 1281.45,429.26C1281.17,428.09 1279.62,428.58 1278.74,428.03C1277.52,427.26 1275.08,426.77 1275.55,428.61C1274.22,428.45 1272.72,428.18 1271.40,428.38C1270.67,428.49 1270.19,428.66 1269.53,428.20C1268.36,427.37 1268.46,427.71 1267.33,427.70C1266.20,427.68 1260.56,424.74 1260.07,425.93C1259.02,425.58 1259.71,424.97 1259.74,424.37C1259.77,423.67 1257.29,423.99 1256.73,423.45C1259.83,422.49 1259.87,418.90 1260.30,416.57C1260.47,415.65 1260.59,414.20 1261.48,413.55C1262.79,412.59 1260.95,412.46 1260.89,413.54C1260.56,411.33 1260.92,408.59 1261.95,406.56C1263.12,407.08 1264.29,407.70 1264.84,408.74C1264.98,409.21 1265.12,409.67 1265.26,410.13C1265.56,410.72 1266.28,410.80 1266.30,411.51C1266.57,410.60 1265.38,409.88 1265.22,409.01C1264.97,407.66 1264.33,406.75 1262.83,406.10C1262.20,405.82 1261.49,405.45 1260.96,405.05C1260.08,404.39 1262.27,404.72 1262.73,405.04C1261.68,404.64 1261.38,401.10 1261.93,400.41C1260.64,401.18 1257.37,399.67 1256.67,398.66C1256.05,397.76 1254.77,397.29 1254.44,396.24C1254.14,395.28 1256.22,394.23 1253.50,394.13C1253.79,393.83 1253.81,393.27 1254.21,393.04C1255.20,392.45 1256.23,393.44 1257.21,393.54C1255.41,392.61 1254.75,392.92 1252.96,393.11C1252.05,393.21 1250.21,392.12 1251.87,391.95C1251.37,391.58 1251.54,391.34 1252.38,391.23C1251.07,390.97 1249.31,391.81 1248.19,390.89C1248.77,390.89 1249.30,390.78 1249.80,390.56C1248.73,390.01 1246.85,390.23 1246.67,391.36C1246.58,390.62 1245.51,389.94 1246.42,389.31C1246.09,390.11 1244.31,390.06 1245.33,389.04C1243.21,390.63 1239.85,387.02 1237.73,388.98C1236.72,387.95 1235.89,387.32 1234.28,387.06" id="path2182" /> 9 <path d="M1336.17,430.89C1336.63,430.52 1336.71,429.75 1337.31,429.50C1338.52,429.00 1339.89,428.87 1341.04,428.25C1342.06,427.69 1341.33,426.10 1342.72,426.19C1342.90,428.18 1344.07,431.05 1343.50,432.98C1342.90,435.01 1341.70,436.96 1340.64,438.85C1340.23,438.31 1336.36,437.15 1338.42,436.44C1337.86,436.33 1337.33,436.15 1336.84,435.92C1337.38,435.63 1337.76,435.16 1337.69,434.61C1336.59,434.83 1336.43,433.81 1337.06,433.31C1336.12,433.11 1335.52,432.09 1336.81,431.87C1336.54,431.57 1336.33,431.24 1336.17,430.89" id="path2184" /> 10 </g> 11 <g class="land coast fr gp" id="gp"> 12 <path d="M799.95,633.49C799.66,634.01 799.49,637.30 798.32,635.06C797.67,633.80 798.33,632.56 799.95,633.49" id="path2582" /> 13 <path d="M799.94,633.36C800.52,632.84 799.76,631.84 800.78,631.68C801.01,632.50 801.84,633.09 802.65,633.49C801.96,633.71 800.44,634.35 799.94,633.36" id="path2584" /> 14 <path d="M802.18,636.52C801.51,635.96 801.60,635.68 802.45,635.68C802.62,636.05 802.53,636.33 802.18,636.52" id="path2586" /> 15 </g> 16 <path class="land coast fr mq" d="M805.25,647.94C804.60,647.14 803.93,647.82 803.59,647.06C803.25,646.33 802.82,645.53 802.75,644.75C802.65,643.72 803.93,644.62 804.27,644.97C804.94,645.66 805.91,647.09 805.25,647.94" id="mq" /> 17 <path class="land fr gf" d="M853.00,741.55C854.29,741.50 855.28,739.52 855.71,738.65C856.50,737.03 855.66,735.23 856.87,733.75C858.30,732.00 856.93,730.71 855.66,729.32C854.34,727.87 854.35,725.29 854.19,723.53C854.01,721.47 854.31,720.30 855.93,718.87C856.53,718.34 857.28,717.75 857.45,716.96C857.67,715.94 857.91,714.67 859.55,715.21C860.61,715.57 861.37,716.33 862.49,716.60C863.71,716.90 865.17,716.88 866.22,717.61C867.45,718.47 869.15,721.74 871.03,721.62C870.72,722.03 870.51,722.48 870.40,722.97C870.89,720.82 875.07,724.51 872.76,725.94C873.88,725.57 873.21,724.62 873.76,723.94C874.60,722.92 875.31,725.31 875.38,725.82C875.74,728.24 873.71,730.80 872.34,732.72C870.76,734.93 869.67,736.80 868.66,739.30C868.29,740.22 867.80,741.00 866.94,741.63C866.59,741.89 865.95,742.49 865.48,742.61C864.70,742.79 864.08,742.23 863.25,742.59C863.57,741.71 862.96,741.70 862.23,741.91C861.20,742.19 860.31,741.82 859.33,741.52C858.83,741.37 856.93,742.62 856.63,742.95C856.07,743.55 853.38,741.91 853.00,741.55" id="gf" /> 18 <path class="land coast fr re" d="M1696.30,922.39C1696.04,920.61 1692.17,921.67 1692.77,923.37C1693.66,925.94 1699.15,926.15 1696.30,922.39" id="re" /> 19 </g> 20</svg>

css

1#fr{ 2background-image:url(img/sample.jpg); 3background-size:contain; 4}

上記のように設定しても反映されません。教えていただけましたら幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

ググっただけですけど、これでできますかね?
https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image

投稿2020/03/27 06:41

takabosoft

総合スコア8356

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

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

ai_123

2020/03/27 19:35

ありがとうございます!トライしてみます。結果は後ほど。
ai_123

2020/04/09 19:09

これでできたんですが、wordpressのサムネイル画像を呼び出してしようとすると画像が表示されなくなります。the_post_thumbnail(); , get_the_post_thumbnail();どちらも効きません。 <defs> <pattern id="us-img" patternUnits="objectBoundingBox" height="1" width="1"> <image x="0" y="0" width="500" height="300" xlink:href="<?php echo get_template_directory_uri(); ?>/img/sample.png"></image> </pattern> <pattern id="sample-img" patternUnits="objectBoundingBox" height="1" width="1"> <image x="0" y="0" width="600" height="300" xlink:href="<?php the_post_thumbnail(); ?>"></image> </pattern> </defs> 一つ目のsample.pngは表示されるんですが、二つ目のサムネイル画像呼び出しは失敗してしまいます。wordpress上でimage xlinkにthumbnailは使えないってことなんでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問