Html 如何修复尝试显示SVG时出现的403个错误<;图像>;?

Html 如何修复尝试显示SVG时出现的403个错误<;图像>;?,html,css,svg,file-permissions,http-status-code-403,Html,Css,Svg,File Permissions,Http Status Code 403,我正在基于以下内容构建一个交互式报告: 在localhost上一切都很好,但当我将其上传到服务器时,所有SVG图像都出现403(禁止)错误 我已经尝试过使用相对和绝对路径的图像。不在标签中的图像(常规)工作正常 基于以下问题:,听起来问题似乎是服务器没有加载SVG图像的适当权限 但是,我似乎找不到需要将权限更改为什么。我没有权限更改服务器,也不知道该告诉后端开发人员更改什么 我还读到,xlink:href已被弃用(),应替换为,但我找不到有关如何将标记与标记结合使用的文档。MDN()和W3C()

我正在基于以下内容构建一个交互式报告:

在localhost上一切都很好,但当我将其上传到服务器时,所有SVG图像都出现403(禁止)错误

我已经尝试过使用相对和绝对路径的图像。不在
标签中的图像(常规
)工作正常

基于以下问题:,听起来问题似乎是服务器没有加载SVG图像的适当权限

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

我还读到,xlink:href已被弃用(),应替换为
,但我找不到有关如何将
标记与
标记结合使用的文档。MDN()和W3C()在其
文档中仍然使用xlink:href

如果错误是由xlink:href不推荐引起的,如何正确引用
中的图像文件?如果
是首选方法,我将如何重写上述代码以适应

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

谢谢你抽出时间

我的代码如下:

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

在@Benni的帮助下,通过进一步的研究,问题解决了

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

  • 在终端中,导航到该文件夹并输入
    ls-l
    ,以便查看当前的文件权限列表。资料来源:
  • 获取了类似于
    -rwxr-xr-x
    的内容。关于这些字母的含义,可以在这里找到一个很好的解释:
  • 要更改权限,请输入
    chmod-R 775[文件夹]
    。包括
    -R
    也会更改子目录中所有文件和文件夹的权限。一些教程说,用户可以将权限设置为755,但这并没有解决问题。用了775,成功了
  • 此外,我发现您可以配置各种FTP客户端来为您处理权限。请参阅此处的说明:

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

    您使用的是什么Web服务器?你能把它的一些日志发出去吗?这听起来真的像是服务器端的问题。@Benni不幸的是,我只是前端开发人员,无法访问任何与服务器相关的内容。这是一个Apache服务器,上面有WordPress,如果有帮助的话。我几乎可以肯定这是服务器端的问题。您是否可以附加svg文件权限的屏幕截图?@Benni此处的屏幕截图:。很抱歉之前没有询问此问题,但是您可以使用浏览器打开的其他文件(例如HTML文件)的权限是什么?