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

Question

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

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

<svg>
<g id="fr">
         <g class="land coast fr fx" id="fx">
                            <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" />
                            <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" />
                            <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" />
                            <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" />
                            <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" />
                            <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" />
                        </g>
                        <g class="land coast fr gp" id="gp">
                            <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" />
                            <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" />
                            <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" />
                        </g>
                        <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" />
                        <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" />
                        <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" />
                    </g>
</svg>

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

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

Answer 1

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

Comments

[退会済みユーザー]

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

[退会済みユーザー]

これでできたんですが、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は使えないってことなんでしょうか？