为什么成功的 SVG 在第一个之后的大小？

Question

我正在尝试构建一个面板，概述Azure的一系列构建作业。Azure提供的徽章会根据徽章的顺序进行不同的呈现。它可以归结为一段非常简单的HTML，可以在这个jsfiddle 中使用

如果你改变三个div的顺序，很明显，第一个div限制了连续div的宽度。

我尝试过Chrome、Edge、Edge Beta、FireFox和IE，它们都有相同的(错误(行为。

<div>
<svg width="135.0" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="135.0" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="135.0" height="20.0" fill="#555555" />
<rect width="70.8" height="20.0" fill="#4da2db" x="64.2" />
<rect width="135.0" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="41.1" y="15.0" fill="#000" fill-opacity="0.3">Short</text>
<text x="41.1" y="14.0" fill="#fff">Short</text>
<text x="98.6" y="15.0" fill="#000" fill-opacity="0.3">never built</text>
<text x="98.6" y="14.0" fill="#fff">never built</text>
</g>
</svg>
</div>
<div>
<svg width="155.9" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="155.9" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="155.9" height="20.0" fill="#555555" />
<rect width="70.8" height="20.0" fill="#4da2db" x="85.1" />
<rect width="155.9" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="51.6" y="15.0" fill="#000" fill-opacity="0.3">Longer title</text>
<text x="51.6" y="14.0" fill="#fff">Longer title</text>
<text x="119.5" y="15.0" fill="#000" fill-opacity="0.3">never built</text>
<text x="119.5" y="14.0" fill="#fff">never built</text>
</g>
</svg>
</div>
<div>
<svg width="255.9" height="20.0" xmlns="http://www.w3.org/2000/svg">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0.0" stop-opacity="0.0" stop-color="#000" />
<stop offset="1.0" stop-opacity="0.2" stop-color="#000" />
</linearGradient>
<clipPath id="c">
<rect width="255.9" height="20.0" rx="3.0" />
</clipPath>
<g clip-path="url(#c)">
<rect width="255.9" height="20.0" fill="#555555" />
<rect width="68.9" height="20.0" fill="#4EC820" x="187.0" />
<rect width="255.9" height="20.0" fill="url(#a)" />
</g>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" x="5" y="4">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9H1V11H3L3 12H0V9Z" fill="#fff" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.666656 4H3.7352L6.20309 0.444336C6.38861 0.166992 6.70068 0 7.03479 0H11.5C11.7762 0 12 0.224609 12 0.5V4.96484C12 5.29883 11.8332 5.61133 11.5553 5.79688L8 8.26465V11.333C8 11.7012 7.70154 12 7.33334 12H5L4 11L5.25 9.75L4.25 8.75L2.99997 10L1.99997 9L3.25 7.75L2.25 6.75L1 8L0 7V4.66699C0 4.29883 0.298462 4 0.666656 4ZM10.5 3C10.5 3.82812 9.82843 4.5 9.00003 4.5C8.1716 4.5 7.50003 3.82812 7.50003 3C7.50003 2.17188 8.1716 1.5 9.00003 1.5C9.82843 1.5 10.5 2.17188 10.5 3Z"
fill="#fff" />
</g>
</svg>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="102.5" y="15.0" fill="#000" fill-opacity="0.3">Very very very very long title</text>
<text x="102.5" y="14.0" fill="#fff">Very very very very long title</text>
<text x="220.5" y="15.0" fill="#000" fill-opacity="0.3">succeeded</text>
<text x="220.5" y="14.0" fill="#fff">succeeded</text>
</g>
</svg>
</div>

Answer 1

Azure的徽章不打算在同一上下文中与其他徽章一起显示，因为它们使用的Id不是唯一的。

我正在构建一个C#Razor页面应用程序，所以我在将SVG插入Razor页之前先加载它们。为了解决这个问题，我通过ReplaceIds方法运行SVG，然后将它们传递到Razor页面：

private static string ReplaceIds(string text)
{
string pattern = " id="(\w)"";
while (true)
{
var res = Regex.Match(text, pattern, RegexOptions.IgnoreCase);
if (res.Success && res.Groups.Count > 0)
{
var id = res.Groups[1];
Guid g = Guid.NewGuid();
text = Regex.Replace(text, $" id="{id}"", $" id="{g}"");
text = Regex.Replace(text, @$"url(#{id})", $"url(#{g})");
}
else
return text;
}
}