Question

我正在基于以下内容构建交互式报告：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" 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/

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

尝试显示SVG <img/>时如何解决403错误？

1 个答案: