Search code examples
htmlcsssvggoogle-chrome-devtoolsfirefox-developer-tools

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

I am trying to find out what font is used in an SVG marker that's placed on a Google Maps surface. Specifically, 9 on a blue marker in this codepen.

The label is set with these properties:

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

However, when I use either Chrome or Firefox to zero into the marker, I get the same font-weight regardless of what fontWeight property is set to.

Is there a way to do it?

Solution

  • What Google Maps does is downright sneaky. To prevent the number from being selected with the mouse, the SVG icon (that is the blue circle without the number) is drawn in a lower-lying layer, the number is positioned above, and then the icon is rendered again on top, but with opacity="0.01". If you try to select the marker with the developer tools, you end up in the higher layer and won't see the DOM node for the number at all.

    The icon you select is in a layer with z-index:3. Two sibling elements earlier is a div with z-index:1 (Both have neither class nor id, so selecting in code is awkward). Inside that are the elements that hold the marker and the number 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>

    The following selector will find the number (in the Codepen console, CORS prevents you from accessing it programatically from the browser console):

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