Question

我有以下内容 - 我已经修了一段时间，但我似乎无法在Firefox中找到路径。有没有人知道为什么？圈子出现了。 Firefox代码检查器也给它一个0x0的大小。

<g transform="translate(85 460)" class="avatar">
  <circle cy="0" cx="0" r="6" class="base"></circle>
  <path transform="translate(0, 0) rotate(0) scale(1)" fill="black" d="M 0,0, L 0,8, L 10,0 Z"></path>
  <circle cy="0" cx="0" r="3" class="dot"></circle>
</g>

非常感谢任何帮助。

编辑：完全svg：

<svg style="border: 1px solid black;" height="500" width="500">
  <image height="500" width="500" y="0" x="0" xlink:href="image.jpg"></image>
  <path style="opacity: 1;" d="M85,460Q81,150,85,110C91,49.99999999999999,113,60,125,60S162.75,77,165,110S131,250,140,280S204,305.5,225,310S268.75,322,280,310S291,254,300,230S328,150,340,150S371,209,380,230S394.75,278,400,290S410.5,307,415,310S424,310,430,310S449.75,307,455,310S463.5,324,465,330S465,338.75,465,350Q465,357.5,465,405" class="path selected"></path>
  <path d="M110,395L380,395" class="path"></path>
  <g transform="translate(85 460)" class="avatar">
    <circle cy="0" cx="0" r="6" class="base"></circle>
    <path transform="rotate(0) scale(1)" fill="black" d="M 0,0, L 0,8, L 10,0 Z"></path>
  </g>
</svg>

Answer 1

Per the SVG specification如果路径中出现逗号，则必须在其两侧都有一个数字。

您的路径无效，Firefox的路径渲染是正确的。我不知道如果没有你可以创建一个这个路径错误，那么它是否存在Chrome错误。

要让您的路径在FF中工作，请删除流浪逗号：

<path transform="rotate(0) scale(1)" fill="black" d="M 0,0 L 0,8 L 10,0 Z"></path>

组中的D3路径未显示在Firefox中，仅显示在Chrome中

1 个答案: