我正在嘗試構建一個儀表板，其中概述了 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>
1 回答
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
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;
}
}
- 1 回答
- 0 關注
- 206 瀏覽
添加回答
舉報
0/150
提交
取消