我正在嘗試構(gòu)建一個(gè)儀表板，其中概述了 Azure 中的一系列構(gòu)建作業(yè)。Azure 提供的徽章根據(jù)徽章的順序呈現(xiàn)不同的方式。它可以歸結(jié)為一段非常簡(jiǎn)單的 HTML，可以在這個(gè) jsfiddle 中找到如果更改三個(gè)的順序，div很明顯第一個(gè)div限制了連續(xù)的寬度div。我嘗試過 Chrome、Edge、Edge Beta、FireFox 和 IE，但都有相同的（錯(cuò)誤）行為。<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>
1 回答
一只甜甜圈
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊
Azure 徽章不打算與同一上下文中的其他徽章一起顯示，因?yàn)樗鼈兪褂玫?ID 并不唯一。
我正在構(gòu)建一個(gè) C# Razor 頁(yè)面應(yīng)用程序，因此我在將 SVG 插入 Razor 頁(yè)面之前加載它們。為了解決這個(gè)問題，我通過 ReplaceIds 方法運(yùn)行 SVG，然后將它們傳遞到 Razor 頁(yè)面：
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;
}
}
- 1 回答
- 0 關(guān)注
- 224 瀏覽
添加回答
舉報(bào)
0/150
提交
取消