Блог

Главная - Вопросы по программированию - Включение SVG в объектный HTML-тег не работает

Включение SVG в объектный HTML-тег не работает

#javascript #html #css #svg

#javascript #HTML #css #svg

Вопрос:

Я пытался очистить свой HTML-файл, разделив SVG-файл длиной 2,5 тыс. строк в его собственный файл. Однако использование <object> тега пока не увенчалось успехом. Я попытался и добился успеха, чтобы SVG отображался с <img> тегом, но ни одна из моих CSS-анимаций не работала. Любые указания о том, как заставить это работать с помощью SVG-файла, были бы весьма признательны!

Фрагмент SVG (2500 СТРОК)

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
  <g id="jjperezaguinaga">
    <g id="countryObjects">
      <path fill="#F15C27" d="M124.467,134.068c-2.028,2.304-3.916,4.723-5.74,7.187c-0.104,0.155-0.359,0.16-0.568,0.012l-14.95-10.734
            c-0.208-0.149-0.431-0.462-0.492-0.699c-0.699-2.659-1.231-5.311-1.771-8.085c-0.046-0.243,0.114-0.458,0.359-0.476
            c2.819-0.201,5.698-0.233,8.443-0.247c0.239,0,0.59,0.138,0.781,0.308l13.809,12.168
            C124.531,133.671,124.588,133.925,124.467,134.068z"/>
      <polygon fill="#FFFFFF" points="109.465,128.355 107.582,126.629 109.685,128.071       "/>
      <polygon fill="#FFFFFF" points="109.95,127.335 107.582,126.629 109.983,126.959        "/>
      <path fill="#FFFFFF" d="M109.84,126.14c-0.774,0.136-1.513,0.311-2.258,0.489l2.092-0.86L109.84,126.14z"/>
      <path fill="#FFFFFF" d="M109.129,125.058l-1.547,1.571c0.38-0.634,0.787-1.249,1.219-1.843L109.129,125.058z"/>
      <path fill="#FFFFFF" d="M107.994,124.383c-0.166,0.732-0.298,1.487-0.412,2.246c-0.016-0.782-0.027-1.573,0.005-2.34
            L107.994,124.383z"/>
...
</svg>

Часть HTML

 <!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF__8">
  <title>Overlook</title>
  <link type="text/css" href="https://fonts.googleapis.com/css2?family=Roboto:wght@900amp;display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<object data="../assets/background.svg" type="image/svg xml"></object>

Каталог файлов

Анимация CSS

 @-webkit-keyframes rotate-right {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate-left {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
  }
}

@-webkit-keyframes hover {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(5%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}

@-webkit-keyframes pull {
  0% {
    -webkit-transform: scaleY(1);
  }
  40% {
    -webkit-transform: scaleY(1.01);
  }
  60% {
    -webkit-transform: scaleY(0.99);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.99);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}

@function getSpeed($speed, $type:turtle) {
  $secs: 360;
  $divider: 1;
  @if($type == turtle) {
    $divider: 1;
  } @else if($type == rabbit) {
    $divider: 10;
  } @else {
    $divider: 60;
  }
  @if $speed == fastest {
    $secs: 60 / $divider;
  } @else if $speed == really-fast {
    $secs: 120 / $divider;
  } @else if $speed == fast {
    $secs: 180 / $divider;
  } @else if $speed == slow {
    $secs: 240 / $divider;
  } @else if $speed == really-slow {
    $secs: 300 / $divider;
  } @else if $speed == slowest {
    $secs: 360 / $divider;
  }
  @return #{$secs}s;
}

@mixin _rotate-animation($direction, $speed, $type) {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: rotate-#{$direction} getSpeed($speed, $type) linear 0s infinite;
}

@mixin _hover-animation($duration, $delay) {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-animation: hover #{$duration}s linear #{$delay}s infinite;
}

@mixin _pull-animation($duration, $delay, $x: 200px, $y: 200px) {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: $x $y;
  -webkit-animation: pull #{$duration}s linear #{$delay}s infinite alternate;
}

@mixin rotate($type, $direction: left, $speed: slow, $x: 200px, $y: 200px) {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-origin: $x $y;
  @include _rotate-animation($direction, $speed, $type);
}

#airplane2, #airplane1 {
  @include rotate(turtle, right, fastest);
}

#countryObjects {
  @include rotate(turtle, right, slow);
}

#floatingGlobe {
  @include rotate(turtle, left, normal);
}

#globe {
  $duration: 0;
  $delay: 0;
  @include _hover-animation($duration, $delay);
}

#windmill {
  @include rotate(flash, right, really-fast, 331px, 201px);
}

// Clouds
@for $i from 1 through 3 {
  #cloud#{$i} {
    @include _hover-animation(3, $i);
  }
}


// Inner Circles
@for $i from 1 through 5 {
  $direction: left;
  $speed: really-fast;
  #circle#{$i} {
    @if $i % 2 == 1 {
      $direction: right;
      $speed: really-fast;
    } @else {
      $direction: left;
      $speed: slow;
    }
    @include rotate(rabbit, $direction, $speed);
  }
}

Комментарии:

1. Можем ли мы увидеть CSS-анимацию для SVG?

2. Я добавил анимацию для SVG @MrPizzaGuy. Спасибо, что взглянули.

3. @MrPizzaGuy Не спешите, я действительно ценю вашу помощь! Тело является следующим тегом после тега object. Я могу легко поместить его туда. Я просто подумал, что, поскольку я собирался использовать это в качестве фона, я поместил его за пределы тела (все еще изучая лучшие практики)

4. это очень странно… Я думаю, вам придется сохранить его в HTML-файле. Извините!

5. Вам нужно поместить тег <link> в SVG-файл, чтобы SVG-файл мог загружать css.