为什么连续的 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 页面：&nbsp; &nbsp; private static string ReplaceIds(string text)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; string pattern = " id=\"(\\w)\"";&nbsp; &nbsp; &nbsp; &nbsp; while (true)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var res = Regex.Match(text, pattern, RegexOptions.IgnoreCase);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (res.Success && res.Groups.Count > 0)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var id = res.Groups[1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Guid g = Guid.NewGuid();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = Regex.Replace(text, $" id=\"{id}\"", $" id=\"{g}\"");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = Regex.Replace(text, @$"url\(#{id}\)", $"url(#{g})");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return text;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }