尝试显示 SVG <图像> 时如何修复 403 错误？

Posted 2023-03-31

【中文标题】尝试显示 SVG <图像> 时如何修复 403 错误？

【英文标题】：How do I fix 403 Errors when trying to display an SVG <image>?

【发布时间】：2019-05-30 08:24:28

【问题描述】：

我正在基于此构建交互式报告：https://avocode.com/design-report-2017

在 localhost 上一切正常，但是当我将它上传到服务器时，我收到所有 SVG 图像的 403（禁止访问）错误。

我尝试过使用图像的相对路径和绝对路径。不在<image> 标签（常规<img>）中的图片效果很好。

基于这个问题：403 forbidden error when displaying svg image，听起来问题在于服务器没有适当的权限来加载 SVG 图像。

但是，我似乎找不到需要更改为的权限。我无权更改服务器，也不知道该告诉后端开发人员更改什么。

我还读到 xlink:href 已弃用 (https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/)，应替换为 <use>，但我找不到有关如何将 <use> 标签与 <image> 标签结合使用的文档. MDN (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) 和 W3C (https://www.w3.org/TR/SVG11/struct.html#ImageElement) 在他们的 <image> 文档中仍然使用 xlink:href。

如果错误是由于 xlink:href 弃用，我如何正确引用 <svg> 中的图像文件？如果<use>是首选方法，我将如何重写上述代码以适应？

任何关于重写我的代码以正确显示图像或重新配置服务器以显示它们的帮助将是救命稻草。

感谢您的宝贵时间。

我的代码如下：

<div title aria-label="aimation" style="width: 100%; height: 100%; overflow: hidden; margin: 0px auto;">
  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewbox="0 -100 800 1000"   style="width: 100%; height: 100%;">
    <g>
      <g id="o-phone" class="image" transform="translate(-500 500)">
        <image   href="/img/omnichannel/Phone.svg"></image>
      </g>

      <g id="o-floating-shelf" class="image" transform="translate(750 -200)">
        <image   href="/img/omnichannel/Floating Shelves.svg"></image>
      </g>

      <g id="o-bookshelf1" class="image" transform="translate(445 -1000)">
        <image   href="/img/omnichannel/Bookshelf.svg"></image>
      </g>

      <g id="o-stack1" class="image" transform="translate(520 -500)">
        <image   href="/img/omnichannel/Stack Back Bottom.svg"></image>
      </g>

      <g id="o-bookshelf2" class="image" transform="translate(420 -1000)">
        <image   href="/img/omnichannel/Bookshelf.svg"></image>
      </g>

      <g id="o-stack2" class="image" transform="translate(390 -500)">
        <image   href="/img/omnichannel/Stack Front Bottom.svg"></image>
      </g>
    </g>
  </svg>
</div>

【问题讨论】：

您使用的是什么网络服务器？您能否发布一些日志？对我来说，这听起来确实像是服务器端问题。

@Benni 不幸的是，我只是前端开发人员，无法访问与服务器相关的任何内容。如果有帮助的话，它是一个带有 WordPress 的 Apache 服务器。

我几乎可以肯定这是服务器端问题。您能否附上您的 svg 文件权限的屏幕截图？

@Benni 截图：imgur.com/a/lSeH7I6.

很抱歉之前没有要求这个，但是您可以使用浏览器打开的其他文件（例如 HTML 文件）的权限是什么？

【参考方案1】：

通过更多研究和@Benni 的帮助，问题解决了！

原来问题出在文件权限上。解决：

在终端中，导航到文件夹并输入ls -l，以便查看当前文件权限列表。来源：https://askubuntu.com/questions/528411/how-do-you-view-file-permissions 得到了类似-rwxr-xr-x 的东西。可以在这里找到对这些字母含义的很好解释：https://unix.stackexchange.com/questions/183994/understanding-unix-permissions-and-file-types 要更改权限，请输入chmod -R 775 [folder]。包含-R 也会更改子目录中所有文件和文件夹的权限。一些教程说将权限设置为755，但这并没有解决问题。选择了 775，成功了。 此外，我发现您可以配置各种 FTP 客户端来为您处理权限。请参阅此处的说明：https://www.siteground.com/tutorials/ftp/change-permissions/

如果其他人遇到这个问题，我希望这个答案会有所帮助/有价值。