Элемент использования SVG, не показывающий пути

Я пытаюсь использовать SVG-спрайт для отображения одиночного SVGS, когда они мне нужны, и называя их через элемент «use». Я знаю, что это немного сложно из-за тени DOM, но я не могу понять, почему мои элементы не отображаются должным образом.Элемент использования SVG, не показывающий пути

В моей локальной сборке dev, которая отличается от этого JSfiddle, элемент use фактически показывает SVG и пути, но только как невидимые фигуры. Никакой заливки или чего-либо еще. Просто невидимые пути. Я его структурирована следующим образом:

<nav class="nav-right"> 
    <div class="nav-right-left"> 
     <svg class="icon"> 
      <use class="icon-menu" xlink:href="#icon-menu"></use> 
     </svg> 
    </div> 
</nav>

В SVG класс «значок» показывает в нужном месте, но использование элемента показывает вне DIV и вниз страницы. Может ли это быть из-за таблицы стилей пользовательского агента, имеющих svg: not (: root) {overflow: hidden;}?

Может ли кто-нибудь взглянуть на JSfiddle и попытаться объяснить, почему они не отображаются правильно? https://jsfiddle.net/qs769rk6/

источник

2016-05-04 Astunda

В вашем случае viewBox каждого символа неверен, первые два аргумента (которые равны 0 0) не являются хорошими. Оба эти аргумента - перемещать маску, чтобы отобразить правильную область, в вашем случае маска находится в неправильном месте. Для # icon-меню попробуйте установить viewBox следующим образом: viewBox = "335 165 40 32".

источник

2016-05-04 16:34:44

Вау, большое вам спасибо! Это сработало отлично. Можете ли вы объяснить 335 и 165? Я подумал, что «335 165» осталось и сверху, и его нельзя трогать. – Astunda

Кроме того, я прочитал статью, в которой говорится, что первые два аргумента должны редко меняться от «0 0», и поскольку мой спрайт является линией SVG, я не думал, что этот атрибут изменится. – Astunda

Значение «0 0» было бы истинным, если бы ваши значки были выровнены с началом SVG (0,0), но ваши символы не совпадают. Например, viewBox для вашего «меню значков» имеет значение «127 0 40 32», что означает, что все содержимое должно помещаться в пределах области (127,0) - (167,32). Но если вы посмотрите на координаты своего пути, вы увидите, что некоторые из них намного больше (например, 326.2, 183.1). Таким образом, похоже, что большинство, если не все, вашего символа viewBoxes ошибочны. –

Элемент использования SVG, не показывающий пути

ответ

Смежные вопросы