У меня есть элемент SVG, отображаемый на некоторых страницах, но не на других, тот же браузер, платформа и др. - PullRequest
Новая
       54

У меня есть элемент SVG, отображаемый на некоторых страницах, но не на других, тот же браузер, платформа и др.

0 голосов
/ 26 ноября 2018

В следующем коде есть набор svg-треугольников 

<svg class="constellation" viewBox="0 0 275 275">
<use class="constellation__1" xlink:href="#constellation-svg" data-props="190x190,83,38" transform="scale(0.693582)" x="119.66851188213664" y="54.78800219180441"></use>
<use class="constellation__2" xlink:href="#constellation-svg" data-props="107x107,64,67" transform="scale(0.390596)" x="163.851982" y="171.532544"></use>
<use class="constellation__3" xlink:href="#constellation-svg" data-props="53x53,148,200" transform="scale(0.193473)" x="764.96462" y="1033.735676"></use>

Этот svg-код появляется на двух разных страницах.На одной странице он отображается, на другой - нет.Я не настроил ни одну страницу, но мне было поручено заставить svg отображаться на обеих.

Может кто-нибудь сказать мне, почему они не появляются во второй ссылке?Я сравнил CSS и HTML и не могу найти разницу.

1 Ответ

0 голосов
/ 03 декабря 2018

Итак, я обнаружил, что элемент svg "use" требует исходного svg.Он не содержит фактических координат вектора SVG, поэтому для использования элементов SVG «use» требуется указатель на фактический элемент SVG в DOM.Например, элемент "use" требует атрибута, такого как этот: xlink: href = "# some_id_of_an_actual_svg", который указывает на элемент svg, который содержит фактическую векторную информацию.svg id = "some_id_of_an_actual_svg"

Итак <svg class="my-svg"> <use xlink:href="#some_id_of_an_actual_svg"></use> </svg>

Когда используется отдельно, это не svg, это указатель на svg, который должен быть в DOM, содержащемидентификатор, указанный в атрибуте xlink: href.

<svg id="some_id_of_an_actual_svg" viewBox="0 0 467 467" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" d="M466.2 455.5V31.2C466.2 14.5 452.7 1 436 1H11.7C5.8 1 1 5.8 1 11.7c0 3 1.2 5.6 3.1 7.6l443.8 443.8c1.9 1.9 4.6 3.1 7.6 3.1 5.9 0 10.7-4.8 10.7-10.7" class="some-class"></path></svg>

Добавление только одного svg «use» ничего не отобразит, оба элемента svg должны существовать.Процесс состоит в том, чтобы скрыть исходный svg и использовать элемент «use» для создания нескольких версий и стилизации их по-разному.Или даже использовать исходный svg, невидимый для представления вашего первого экземпляра, а затем использовать элементы «use» для создания большего количества экземпляров из них для работы по-разному.

...