代码之家 › 专栏 › 技术社区 › Petrolea

SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

internet-explorer-11 cross-browser svg css

Petrolea · 技术社区 · 6 年前

我试着在 <path> 元素,但注意到其大小在IE11中有所不同,但Chrome、Firefox和Edge的大小“正确”。例子: Codepen (在下面的编辑中更新)

<svg viewbox="0 0 100 100">
    <path
      stroke="#ffff00"
      fill-opacity="0"
      marker-start="url(#marker)"
      stroke-width="4"
      d="M 50 98 A 48 48 0 0 0 50 2"
    />

   <marker id="marker" refX="5" refY="5" markerWidth="100" markerHeight="100">
     <circle class="marker" fill="#ff0000" cx="5" cy="5" r="1.5" />
   </marker>
</svg>

我还注意到没有应用填充-图像显示了Chrome(左)和IE11(右)之间的比较:

有人知道原因吗?

编辑:我已经用 stroke 和 stroke-width 根据@VAL建议的属性: Updated Codepen

stroke="#ff0000" stroke-width="0"

1 回复 | 直到 6 年前

vals 6 年前

事实证明,您只需将笔划宽度=“0”设置为IE,这在其他浏览器中似乎是默认值

.svg-container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

svg {
  overflow: visible;
}

<div class="svg-container">
  <svg viewbox="0 0 100 100">
    <path
          stroke="#ffff00"
          fill-opacity="0"
          marker-start="url(#marker)"
          stroke-width="4"
          d="M 50 98 A 48 48 0 0 0 50 2"
      />

    <marker id="marker" refX="5" refY="5" markerWidth="100" markerHeight="100">
      <circle class="marker" fill-opacity="1" stroke-width="0" fill="#ff0000" cx="5" cy="5" r="1.5" />
    </marker>
  </svg>
</div>

推荐文章

Petrolea · SVG-圆圈标记在所有浏览器中的大小都不相同(IE11)

6 年前

Dev Doc · 如何在整个应用程序的所有浏览器中禁用浏览器保存密码提示?[副本]

6 年前

funkysoul · 浏览器之间的CSS颜色差异

6 年前

Rumba · IE11上的addEventListener上未传递参数

7 年前

Basheer Kharoti · microsoft edge extension中未定义chrome

7 年前

Denisa Corbu · appendChild在IE中不工作

7 年前

Rhushikesh · 无法在angular2应用程序中接收存储事件

7 年前

Sod Almighty · 当使用rowspan时,如何在所有浏览器中正确调整表行的大小?

7 年前

Andy · 在文本区域中保存文本的独立于浏览器的方式

7 年前

Jithin Raj P R · CSS箭头在不同浏览器中的位置不同

7 年前