html - 尝试显示 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/ )，应替换为 <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" 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 的帮助，问题解决了!

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

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

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