2

Хочу загрузить элемент svg через use из внешнего файла

В теле html пишу

<div>
  <svg>
    <use xlink:href="qwe.svg#arrow"/>
  </svg>
</div>

указываю путь до самого файла(qwe.svg) и индификатор. но не отображается

код svg

<svg>
  <g id="arrow">
    <polygon points="38.25,0 38.25,357 318.75,178.5" />
  </g>  
</svg>
1
  • В коде svg не хватает xmlns="http://www.w3.org/2000/svg"
    – Alexey Ten
    31 июл 2018 в 10:59

2 ответа 2

3
  • Сначала нужно обязательно добавить файл qwe.svg в HTML с помощью тега <object>

    <object type="image/svg+xml" data="qwe.svg">
      Your  browser does not support SVG 
    </object>
    
  • Далее в любом месте документа HTML вызываете иконку по ID.

    <div>
      <svg class="svg-icons"> 
        <use  xlink:href="qwe.svg#arrow"></use> 
      </svg>
    </div>
    
2
  • приём, с возвращением=)
    – Arthur
    4 авг 2018 в 14:51
  • @Arthur спасибо 4 авг 2018 в 14:59
1

Для Node.js проблема в том, что файл SVG отдается в текстовом формате.
В серверной части для типов файлов надо прописать следующее:

var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript",
    '.svg': "**image/svg+xml**"
  };

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.