如何使用 DevTools 查看 SVG 中使用的字体？

Question

我试图找出放置在 Google 地图表面上的 SVG 标记中使用的字体。具体来说，9 在 this codepen 中的蓝色标记上。

标签设置了以下属性：

label: {
    text: "9",
    color: "white",
    fontWeight:"bold"
},

但是，当我使用 Chrome 或 Firefox 将标记归零时，无论 fontWeight 属性设置为什么，我都会得到相同的字体粗细。

有办法吗？

Answer 1

Google 地图所做的是彻头彻尾的鬼鬼祟祟。为了防止用鼠标 select 编辑数字，SVG 图标（即没有数字的蓝色圆圈）被绘制在 lower-lying 图层中，数字位于上方，然后图标再次呈现在顶部，但带有 opacity="0.01"。如果您尝试使用开发人员工具 select 标记，您最终会进入更高层并且根本看不到数字的 DOM 节点。

您 select 的图标与 z-index:3 在一个图层中。前面的两个兄弟元素是 div 和 z-index:1（两者都没有 class 也没有 id，所以 selecting 在代码中很尴尬）。里面是包含标记和数字 9 的元素：

<div style="width: 32px; height: 32px; overflow: hidden; position: absolute; left: -16px; top: -16px; z-index: 0;"> <img alt="" src="data:image/svg+xml;utf8,..." draggable="false" style="position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;"> </div> <div style="position: absolute; left: 0px; top: 0px; z-index: 0;"> <div style="height: 100px; margin-top: -50px; margin-left: -50%; display: table; border-spacing: 0px;"> <div style="display: table-cell; vertical-align: middle; white-space: nowrap; text-align: center;"> <div style="color: white; font-size: 14px; font-weight: bold; font-family: Roboto, Arial, sans-serif;">9</div> </div> </div> </div>

以下 selector 会找到数字（在 Codepen 控制台中，CORS 阻止您从浏览器控制台以编程方式访问它）：

document.querySelector('div[style*="z-index: 103"] div[style*="display: table-cell"] > div')

如何使用 DevTools 查看 SVG 中使用的字体？

How can I use DevTools to see what font is being used in an SVG?

html

css

svg

google-chrome-devtools

firefox-developer-tools