时间戳

首页 > 解决方案 > 使用 html5 在 safari 上渲染 SVG 时出现问题

html - 使用 html5 在 safari 上渲染 SVG 时出现问题

问题描述

我马上承认我对 html 中的 SVG 图形非常陌生。也就是说，我正在尝试将我的站点图像升级到适当的 SVG。

我从这段代码开始：

<svg class="logo">
    <image
      class="logo"
      xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
      src="https://cdn.badmonsterarts.com/main_logo.png"
    />
</svg>

在 chrome 和 firefox 中运行良好，但是在 Safari（移动和桌面）上测试时，它呈现为一个空白矩形。那就是说我做了一些研究并尝试了一些堆栈溢出答案，这将我们带到了我当前的代码：

<svg
  class="logo"
  viewBox="0 0 256 75"
  xmlns="http://www.w3.org/2000/svg"
  role="img"
>
        <image
          class="logo"
          xlink:href="https://cdn.badmonsterarts.com/main_logo.svg"
          src="https://cdn.badmonsterarts.com/main_logo.png"
        />
</svg>

然而问题是这仍然适用于 chrome 和 firefox，但我仍然无法让它在 Safari 中呈现。

这是我用来调整大小的 CSS，徽标包装器是一个围绕 SVG 的 div，作为一个包装器：

.logo-wrapper {
  width: 256px;
  height: 75px;
  overflow: hidden;

  .logo {
    width: auto;
    height: 100%;
  }
}

我也尝试过使用<use ... />，而不是<image ... />没有运气，当我使用<use ... />它时，它甚至没有在 chrome 中渲染。我希望您的聪明才智能够带领我走向正确的方向并挽救我的理智。

如果它可以帮助任何人调试这个，有一个链接指向正在使用 SVG 的站点（导航栏左上角的徽标）。 https://www.badmonsterarts.com/

谢谢！

标签： htmlsvg

解决方案

如果将图像宽度和高度设置为 viewBox 的 100%，它应该可以工作（我从外部 SVG 中获取了 viewBox 值）。

通过仅设置 viewBox，您可以使 SVG 响应式 - 为什么您可以忽略logo该类

.logo-wrapper {
  width: 256px;
  height: 75px;
  overflow: hidden;
}
<div class="logo-wrapper">
  <svg viewBox="0 0 679 200">
    <image width="100%" height="100%" xlink:href="https://cdn.badmonsterarts.com/main_logo.svg" />
  </svg>
</div>

推荐阅读