Question

我想知道如何将文本放在SVG中的以下代码中？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="8000" height="3859" viewBox="0 0 8000 3859">
<g id="Australian Capital Territory">
    <path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black' />
</g>

因此，在这个例子中，我想写一下澳大利亚首都地区。而且我希望能够添加其他状态，其中还有形状。

任何帮助，我将不胜感激。

Hodds。

Answer 1

使用<text>元素（view on JS Bin）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="7300 2639.25 30 17.90625">
<g id="AustralianCapitalTerritory">
    <path d='M7309.2520970 2655.9737271L7309.1225992 2655.9244070L7308.8019058 2655.7330585L7308.7090199 2655.6527227L7308.5551142 2655.4676452L7305.7285369 2652.0430337L7305.6607371 2651.9503255L7305.1115580 2650.6791888L7305.1481699 2647.5938860L7305.1732559 2647.1433952L7305.8458307 2643.8975903L7305.8824427 2643.7803067L7305.9441406 2643.6630232L7306.0675364 2643.4842166L7306.2221201 2643.3052406L7306.5923075 2643.0027101L7307.3204783 2642.5462873L7312.0535883 2639.7816499L7314.5533701 2640.5899233L7314.5411661 2640.7443240L7314.5533701 2640.8924538L7314.5838801 2641.0032969L7314.7445658 2641.1700701L7315.8117360 2642.1264732L7317.0646779 2642.6388260L7317.2131596 2642.6757737L7317.3799474 2642.6942476L7317.5460571 2642.6820447L7317.8545466 2642.7374662L7319.1447784 2643.3237144L7319.2559702 2643.3854069L7319.3237701 2643.4964195L7319.1698644 2643.6569217L7318.8613749 2643.8913193L7318.4410156 2644.1321573L7318.3237218 2644.1875789L7318.1752400 2644.2307975L7318.0091303 2644.2246961L7317.4226613 2644.0702954L7316.4476989 2643.9345380L7316.2626052 2643.9284365L7315.9792017 2643.9963999L7314.7133778 2644.4528227L7314.6028640 2644.5084138L7314.4109903 2644.6565436L7314.2509826 2644.8355196L7313.5045059 2645.7426027L7313.3621261 2645.9214092L7312.1891881 2649.7412595L7312.1647801 2649.8770169L7312.1586781 2650.0127743L7312.1830861 2650.2966615L7312.3064819 2650.7841000L7312.5966654 2652.4440349L7312.6583633 2654.5729345L7312.5410695 2655.1159641L7312.4549636 2655.3505312L7311.4616953 2656.5289595L7311.3688095 2656.6031939L7311.2332097 2656.6464126z' fill='blue' stroke='black'/>
    <text x="7300" y="2648" font-size="2" fill="white" stroke="black" stroke-width=".06">Australian Capital Territory</text>
</g>
</svg>

我在你的SVG中调整了两个不相关的东西：

调整viewBox，以便实际可以看到图片。 width和height可以设置为您喜欢的任何缩放图像。
Australian Capital Territory是无效ID，已更改为AustralianCapitalTerritory

如何将文本放在SVG Shape中

1 个答案: