SVG внешняя таблица стилей не работает - PullRequest
Новая
       30

SVG внешняя таблица стилей не работает

0 голосов
/ 11 мая 2018

Я новичок в svg и пытаюсь анимировать svg-файл с помощью внешней таблицы стилей, но мне не удается стилизовать мой объект 'Cube'.

[index.html file] 

      <head>
        <link rel="stylesheet" type="text/css" href="cube.css">
      </head>
      <body>
        <img src="cube-motion.svg" height="350px" />
        <div class="logo">
          <h1>SVG Cube Animation</h>
        </div>

[файл cube-motion.svg] 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="cube.css" ?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">

<g>
    <polygon id="l1" class="st0" points="105.3,92.7 86.3,103.3 67.3,92.9 67.1,71.9 86,61.2 105.1,71.6   "/>
    <polyline id="l2" class="st1" points="67.1,71.9 86.2,82.5 86.3,103.3 67.1,93.1 66.9,71.9    "/>

    <animateTransform
        attributeName="transform"
        type="translate"
        from="0 0"
        to="0 75"
        begin="0s"
        dur="3s"
        repeatCount="indefinite"
        />
</g>

</svg>

[файл внешней таблицы стилей cube.css] 

 .st0 {
        fill:#FF00FF;
        stroke:#000000;
        stroke-miterlimit:10;
    }

.st1 {
        fill:#23D83C;
        stroke:#000000;
        stroke-miterlimit:10;
    }

.logo {
    position: absolute;
    left: 400;
    top: 150;
  }

1 Ответ

0 голосов
/ 11 мая 2018

Вы на правильном пути с включением внешней таблицы стилей внутри SVG: 

<?xml-stylesheet type="text/css" href="cube.css" ?>

Причина, по которой это не работает, заключается в том, что SVG загружается в HTML как <img>который - по праву - не позволяет обрабатывать дополнительные внешние ресурсы.

Если вы непреклонны в использовании CSS из внешнего файла, у вас есть два варианта: либо встроить SVG в HTML, либо использовать <object data=file.svg type=image/xml+svg></object>.

В зависимости от вашего варианта использования у вас есть три основных способа использования CSS для стилизации:

<img src="my.svg">

Изображения не являются интерактивнымии не имеют права загружать любые другие активы внутри себя.Простое представление только указанного файла изображения.Он позволяет использовать CSS, но только из <style> -элемента внутри SVG.

<object data="my.svg" type="image/svg+xml"></object>

Объекты могут делать больше, чем изображения, такие какзагрузка дополнительных ресурсов и даже включение изолированных (внутри загруженного SVG) взаимодействий (например, CSS :hover -pseudoclass). Загрузка внешнего CSS-файла выполняется так, как вы это сделали в примере кода, инструкция <?xml-stylesheet...?> идет до <svg> -tag

<svg...>...</svg>

Полностью встроенный в документ HTML, это обеспечивает полную интеграцию на странице (это может иметь преимущества на стороне взаимодействияи недостатки на стороне CSS, так как вам придется учитывать стилевую изоляцию), но также наименее пригодные для повторного использования, поскольку вам в основном придется повторять весь SVG, что не имеет значения, если его использовать один раз настр.Обратите внимание, что для встраивания SVG в документ HTML вы не можете помещать в HTML любые декларации SVG-документа и / или XML (<?xml...?>, <!DOCTYPE svg...> и <?xml-stylesheet...?>).Со встроенным SVG вы можете просто импортировать (или встроить) стиль, используя обычные узлы HTML <link> или <style>, где элемент <style> также может находиться внутри элемента <svg>.

Вот быстрый образец разницы между <img> и <object>

...