Question

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

标签设置为以下属性：

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

但是，当我使用Chrome或Firefox将零标记为零时，无论fontWeight属性设置为何，我都会获得相同的字体权重。

有办法吗？

Answer 1

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

您选择的图标位于z-index:3的图层中。之前的两个兄弟元素是一个带z-index:1的div（两者既没有class也没有id，所以在代码中选择很尴尬）。其中包含标记和数字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>

以下选择器将找到该编号（在Codepen控制台中，CORS阻止您以编程方式从浏览器控制台访问它）：

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

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

1 个答案: