SVG对象上的addClass不起作用

Question

我试图将SVG菜单与动画相结合，目前的问题是我的jquery＆＃34; addClass＆＃34;实际上并没有添加课程。任何人都可以向我解释原因吗？

这就是我尝试创建的内容： 单击主对象（#_ x33_）时

这是我的代码：

＆＃13;

＆＃13;

$('#_x33_').click(function() {
  $('#_x32_').addClass('32ani');
  $('#_x34_').addClass('34ani');
  $('#_x35_').addClass('35ani');
  $('#_x31_').addClass('31ani');
});

＆＃13;

html {
  overflow: hidden;
}
body {
  text-align: center;
}
svg {
  margin-top: 50px;
  width: 80%;
}
polygon {
  transform-origin: 50% 50%;
}
#_x31_ {
  animation: move 4s ease forwards;
}
#_x32_ {
  animation: move2 4s ease forwards;
}
#_x33_ {
  cursor: pointer;
  animation: move3 4s ease forwards;
}
#_x34_ {
  animation: move4 4s ease forwards;
}
#_x35_ {
  animation: move5 4s ease forwards;
}
@keyframes move {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(-30px) translatey(15px);
    fill-opacity: 0;
    stroke-width: 5;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(0px) translatey(-40px) scale(0.9, 0.9);
    fill-opacity: 0;
    stroke-width: 10;
  }
  40% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move2 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(-30px) translatey(-15px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(30px) translatey(-25px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move3 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: rotate(0deg);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(-119deg) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 1;
  }
  40% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move4 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(30px) translatey(-15px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(0px) translatey(35px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move5 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(0px) translatey(-30px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(30px) translatey(15px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
.32ani {
  animation: ani32 4s ease forwards;
}
.34ani {
  animation: ani34 4s ease forwards;
}
.35ani {
  animation: ani35 4s ease forwards;
}
.31ani {
  animation: ani31 4s ease forwards;
}
@keyframes ani32 {
  from {
    transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);
  }
  to {
    transform: translatex(32px) translatey(-380px) scale(2, 2);
  }
  @keyframes ani34 {
    from {
      transform: translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    }
    to {
      transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
    }
    @keyframes ani35 {
      from {
        transform: translatex(-120px) translatey(-70px) scale(0.5, 0.5);
      }
      to {
        transform: translatex(-400px) translatey(-500px) scale(2, 2);
      }
      @keyframes ani31 {
        from {
          transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);
        }
        to {
          transform: translatex(-501px) translatey(109px) scale(2, 2);
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2083.4 1075.8" style="enable-background:new 0 0 2083.4 1075.8;" xml:space="preserve">
  <polygon id="_x35_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,341.3 965,272.3 
    1003.4,203.3 1080,203.3 1118.4,272.3 1080,341.3   " />
  <polygon id="_x34_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1118.4,409.3 1080.1,341.3 
    1118.4,273.3 1195.1,273.3 1233.4,341.3 1195.1,409.3   " />
  <polygon id="_x32_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,409.3 850,341.3 
    888.3,273.3 965,273.3 1003.3,341.3 965,409.3  " />
  <polygon id="_x31_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,548.3 850,478.8 
    888.3,409.3 965,409.3 1003.3,478.8 965,548.3  " />
  <polygon id="_x33_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,480.3 965,410.8 
    1003.4,341.3 1080,341.3 1118.4,410.8 1080,480.3   " />
</svg>

＆＃13;

＆＃13;

＆＃13;

希望我能很好地解释我的问题。 提前谢谢！

Answer 1

类和ID不能以数字开头，这就是您的设计和动画不起作用的原因。

请阅读W3 Documentation

  

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高版本，加上连字符（-）和下划线（_）; 他们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符＆＃34; B&W?＆＃34;可以写成＆＃34; B\&W\?＆＃34;或＆＃34; B\26 W\3F＆＃34;。

更改这些类名可以解决您的问题并使您的动画有效。

＆＃13;

＆＃13;

$('#x33_').click(function() {
  $('#x32_').addClass('ani32');
  $('#x34_').addClass('ani34');
  $('#x35_').addClass('ani35');
  $('#x31_').addClass('ani31');
});

＆＃13;

html {
  overflow: hidden;
}
body {
  text-align: center;
}
svg {
  margin-top: 50px;
  width: 80%;
}
polygon {
  transform-origin: 50% 50%;
}
#x31_ {
  animation: move 4s ease forwards;
}
#x32_ {
  animation: move2 4s ease forwards;
}
#x33_ {
  cursor: pointer;
  animation: move3 4s ease forwards;
}
#x34_ {
  animation: move4 4s ease forwards;
}
#x35_ {
  animation: move5 4s ease forwards;
}
@keyframes move {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(-30px) translatey(15px);
    fill-opacity: 0;
    stroke-width: 5;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(0px) translatey(-40px) scale(0.9, 0.9);
    fill-opacity: 0;
    stroke-width: 10;
  }
  40% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-2px) translatey(134px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move2 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(-30px) translatey(-15px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(30px) translatey(-25px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-120px) translatey(60px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move3 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: rotate(0deg);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(-119deg) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 1;
  }
  40% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(-119deg) scale(2.5, 2.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move4 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(30px) translatey(-15px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(0px) translatey(35px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-5px) translatey(-140px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
@keyframes move5 {
  0% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  10% {
    transform: none;
    fill-opacity: 0;
    stroke-width: 5;
  }
  20% {
    transform: translatex(0px) translatey(-30px);
    fill-opacity: 0;
    stroke-width: 5;
  }
  30% {
    transform: rotate(241deg) translatex(30px) translatey(15px) scale(0.9, 0.9);
    stroke-width: 10;
    fill-opacity: 0;
  }
  40% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  50% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  60% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  70% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  80% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  90% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
  100% {
    transform: rotate(241deg) translatex(-120px) translatey(-70px) scale(0.5, 0.5);
    stroke-width: 10;
    fill-opacity: 1;
  }
}
#x32_.ani32 {
  animation: ani32 4s ease forwards;
}
#x34_.ani34 {
  animation: ani34 4s ease forwards;
}
#x35_.ani35 {
  animation: ani35 4s ease forwards;
}
#x31_.ani31 {
  animation: ani31 4s ease forwards;
}
@keyframes ani32 {
  from {
    transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);
  }
  to {
    transform: translatex(32px) translatey(-380px) scale(2, 2);
  }
}
@keyframes ani34 {
  from {
    transform: translatex(-5px) translatey(-140px) scale(0.5, 0.5);
  }
  to {
    transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
  }
}
@keyframes ani35 {
  from {
    transform: translatex(-120px) translatey(-70px) scale(0.5, 0.5);
  }
  to {
    transform: translatex(-400px) translatey(-500px) scale(2, 2);
  }
}
@keyframes ani31 {
  from {
    transform: translatex(-2px) translatey(134px) scale(0.5, 0.5);
  }
  to {
    transform: translatex(-501px) translatey(109px) scale(2, 2);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2083.4 1075.8" style="enable-background:new 0 0 2083.4 1075.8;" xml:space="preserve">
  <polygon id="x35_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,341.3 965,272.3 
    1003.4,203.3 1080,203.3 1118.4,272.3 1080,341.3   " />
  <polygon id="x34_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1118.4,409.3 1080.1,341.3 
    1118.4,273.3 1195.1,273.3 1233.4,341.3 1195.1,409.3   " />
  <polygon id="x32_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,409.3 850,341.3 
    888.3,273.3 965,273.3 1003.3,341.3 965,409.3  " />
  <polygon id="x31_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="888.3,548.3 850,478.8 
    888.3,409.3 965,409.3 1003.3,478.8 965,548.3  " />
  <polygon id="x33_" style="fill:#36ABF2;stroke:#36ABF2;stroke-width:5;stroke-miterlimit:10;" points="1003.4,480.3 965,410.8 
    1003.4,341.3 1080,341.3 1118.4,410.8 1080,480.3   " />
</svg>

＆＃13;

＆＃13;

＆＃13;