html - SVG 忽略 Safari 中的填充

Question

有一个 svg 有一个带有填充和边距的左边框。

.header__link--user svg {
  margin-left: 8px;
  margin-right: 8px;
  padding-left: 8px;
  width: 15px;
  height: 24px;
  position: relative;
  top: 8px;
  fill: #636c6f;
  border-left: 1px solid #2d4146;
}

在 Safari 中，内联 svg 忽略了填充。

<svg viewBox="0 0 1756 1024">
  <path d="M1756.635 146.386c0 15.483-5.63 28.855-17.595 40.819l-819.904 819.2c-11.964 11.964-25.336 17.595-40.819 17.595s-28.855-5.63-40.819-17.595l-819.2-819.2c-11.964-11.964-17.595-25.336-17.595-40.819s5.63-28.855 17.595-40.819l87.973-87.973c11.964-11.964 25.336-17.595 40.819-17.595s28.855 5.63 40.819 17.595l690.408 691.816 691.112-691.112c11.964-11.964 25.336-17.595 40.819-17.595s28.855 5.63 40.819 17.595l87.973 87.973c11.26 11.26 17.595 24.632 17.595 40.115z"></path>
</svg>

有什么建议吗？

Answer 1

最好的方法是在 img 或 css 中使用 svg

<img src="my.svg" />

或

div {
background:url(my.svg);
}