为什么连续的 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"                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>

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;

        }

    }