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

Question

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

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

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

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

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

我还读到 xlink:href 已被弃用 (https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/) and should be replaced with <use>, but I can't find documentation on how to use <use> tags in conjunction with <image> tags. MDN (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image) and 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" width="1340" height="1440" style="width: 100%; height: 100%;">
    <g>
      <g id="o-phone" class="image" transform="translate(-500 500)">
        <image width="500px" height="300px" href="/img/omnichannel/Phone.svg"></image>
      </g>

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

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

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

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

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

Answer 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/

如果其他人遇到这个问题，我希望这个答案是 helpful/valuable。

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

How do I fix 403 Errors when trying to display an SVG <image>?

html

css

svg

file-permissions

http-status-code-403