如何在SVG中围绕文本缩放容器？

Question

我是SVG的新手，并希望将容器垂直扩展，因为它内部的文本变得更长（没有包装）。这是我的SVG（来自github.com/badges/shields）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="63px" height="18px" viewBox="1 2.5 63 18" enable-background="new 1 2.5 63 18" xml:space="preserve">
<g id="Green">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="275" y1="-660.4995" x2="275" y2="-642.5" gradientTransform="matrix(1 0 0 -1 -228 -640)">
        <stop  offset="0" style="stop-color:#4F0400"/>
        <stop  offset="0.1" style="stop-color:#730600"/>
        <stop  offset="0.96" style="stop-color:#E30C00"/>
        <stop  offset="1" style="stop-color:#FFA69B"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M30,20.5h31c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1079.5" y1="3569.875" x2="1079.5" y2="3551.9966" gradientTransform="matrix(1 0 0 1 -1064 -3549.5)">
        <stop  offset="0" style="stop-color:#2E2E2E"/>
        <stop  offset="0.1" style="stop-color:#3F3F3F"/>
        <stop  offset="0.96" style="stop-color:#5A5A5A"/>
        <stop  offset="1" style="stop-color:#AAAAAA"/>
    </linearGradient>
    <path fill="url(#SVGID_2_)" d="M30,20.5H4c-1.657,0-3-1.343-3-3v-12c0-1.657,1.343-3,3-3h26V20.5z"/>
    <g>
        <g opacity="0.3">
            <text transform="matrix(1 0 0 1 35 15.75)" font-family="'OpenSans'" font-size="10">1.1.1</text>
        </g>
        <g>
            <text transform="matrix(1 0 0 1 35 14.75)" fill="#FFFFFF" font-family="'OpenSans'" font-size="10">1.1.1</text>
        </g>
    </g>
    <g>
        <g opacity="0.3">
            <text transform="matrix(1 0 0 1 6 15.75)" font-family="'OpenSans'" font-size="10">gem</text>
        </g>
        <g>
            <text transform="matrix(1 0 0 1 6 14.75)" fill="#FFFFFF" font-family="'OpenSans'" font-size="10">gem</text>
        </g>
    </g>
</g>
</svg>

这是上面产生的图形：

当我将1.1.1更改为more text时，会发生这种情况，这显示在开发人员工具中：

我希望这个图形的容器能够调整大小，因为存在更多文本。我已经研究过这个问题，只发现了如何在容器内部放置文本的答案，而不是如何在文本周围扩展容器（不改变字体大小）。这在SVG中是否可行？

Answer 1

SVG以明确的方式描述页面内容，并使用显式大小调整。它与父框大小调整其内容的HTML不同。

因此，如果您调整文本大小，则必须手动调整之前（之后）绘制的红色框的大小。你可能已经解决了这个问题。

在这种情况下，有问题的“框”是第一个<path>元素。路径描述如下：

d="M30,20.5h31c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z

'M'代表移动。水平线的'H'。贝塞尔曲线等的“C”。您可以在此处阅读有关路径的更多信息：http://www.w3.org/TR/SVG/paths.html

在这种情况下，我们很幸运。我们要做的就是让红框更长，就是增加'h'命令后的值。

你增加多少明显取决于文本，但让我们尝试将其增加20.所以31现在变为51：

d="M30,20.5h51c1.657,0,3-1.343,3-3v-12c0-1.657-1.343-3-3-3H30V20.5z

但是，如果您尝试这样做，您会发现我们的图形现在延伸到SVG图的右手大小并被切断。要解决这个问题，我们需要更改SVG文档的大小。我们需要将width和20添加到viewBox的宽度组件中。所以：

width="63px" height="18px" viewBox="1 2.5 63 18"

变为：

width="83px" height="18px" viewBox="1 2.5 83 18"

您可以在此处查看最终修改的文件：http://jsfiddle.net/2UXg5/