时间戳

首页 > 解决方案 > 尝试显示 SVG 时如何修复 403 错误？

html - 尝试显示 SVG 时如何修复 403 错误？

问题描述

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

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

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

基于这个问题：显示 svg 图像时出现 403 禁止错误，听起来问题在于服务器没有适当的权限来加载 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>

标签： htmlcsssvgfile-permissionshttp-status-code-403

解决方案

通过更多的研究和@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/

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

推荐阅读