Как исправить ошибки 403 при попытке отобразить SVG <image>? - PullRequest
Новая
       6

Как исправить ошибки 403 при попытке отобразить SVG <image>?

0 голосов
/ 03 января 2019

Я создаю интерактивный отчет на основе этого: https://avocode.com/design-report-2017

Все отлично работает на локальном хосте, но когда я загружаю его на сервер, я получаю ошибку 403 (Запрещено) для всехизображений SVG.

Я попытался использовать относительные и абсолютные пути для изображений.Изображения, не входящие в теги <image> (обычные <img>), работают хорошо.

Исходя из этого вопроса: 403 запрещенная ошибка при отображении изображения SVG , на самом деле кажется, что проблема в том, чтоСервер не имеет необходимых разрешений для загрузки изображений 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) по-прежнему используют xlink: href в своей документации <image>.

Если ошибка вызвана устареванием 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>

1 Ответ

0 голосов
/ 04 января 2019

После небольшого исследования и помощи @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/

Если кто-то еще столкнется с этой проблемой, я надеюсь, что этот ответ будет полезным / ценным.

...