событие клика на svg отказывается играть - PullRequest
Новая
       0

событие клика на svg отказывается играть

0 голосов
/ 30 мая 2019

Я нашел этот код на codepen , и я протестировал на jsfiddle, на codepen, но ... когда я добавляю его на тестовую страницу localhost, событие click ничего не делает! 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">

    <!-- bar 1 -->
	    <path fill="#D8D8D8" d="M0,0 L6,0 L6,16 L0,16 L0,0 Z" id="bar1">
      <animate xlink:href="#bar1"
               attributeName="d"
               from="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               	to="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="startAnimation.begin" />
      <animate xlink:href="#bar1"
               attributeName="d"
               	from="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               to="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="reverseAnimation.begin" />
    </path>

    <!-- horizontal line -->
    	<path fill="#D8D8D8" d="M10,0 L16,0 L16,16 L10,16 Z" id="bar2">
      <animate attributeName="d"
	               from="M10,0 L16,0 L16,16 L10,16 Z"
	               to="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
               dur="0.3s"
               fill="freeze" 
               begin="startAnimation.begin" />
      <animate attributeName="d"
	               from="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
	               to="M10,0 L16,0 L16,16 L10,16 Z"
               dur="0.3s"
               fill="freeze" 
               begin="reverseAnimation.begin" />
    </path>
  
    <!--  controls -->
    <!-- these are on top of the visible icon. Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="16" cy="16" r="16" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 16" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="16" cy="16" r="0" fill-opacity="0">
      <animate dur="0.001s" id="reverseAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.001s" attributeName="r" values="0; 16" begin="startAnimation.end"  fill="freeze"  />
    </circle>
  </svg>

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

PS: я также добавил этот стиль: 

/*
 * Play
 * ----
 */
.play {
   position: absolute;
   z-index: 1000;
   top: 35%;
   left: 35%;
   cursor: pointer;
   margin: 0;
   padding: 0.4em;
   width: 30%;
   height: 30%;
}

и изменил 1-ю строку как 

<svg class="play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">

все еще без результата!

1 Ответ

0 голосов
/ 30 мая 2019

На codepen, если вы измените представление на режим отладки , откроется новая вкладка с полноэкранным просмотром страницы.

Просмотрите исходный код, и вы увидите, что страница содержит обычные HTML-теги head и body.

Пример 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test - YouTube Play Pause Button</title>
<style>
      body {
  background: #111;
  text-align: center;
}

svg {
  margin-top: 45vh;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

    </style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">

    <!-- bar 1 -->
        <path fill="#D8D8D8" d="M0,0 L6,0 L6,16 L0,16 L0,0 Z" id="bar1">
      <animate xlink:href="#bar1"
               attributeName="d"
               from="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
                to="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               dur="0.3s"
                   fill="freeze" 
                   begin="startAnimation.begin" />
      <animate xlink:href="#bar1"
               attributeName="d"
                from="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               to="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               dur="0.3s"
                   fill="freeze" 
                   begin="reverseAnimation.begin" />
    </path>

    <!-- horizontal line -->
        <path fill="#D8D8D8" d="M10,0 L16,0 L16,16 L10,16 Z" id="bar2">
      <animate attributeName="d"
                   from="M10,0 L16,0 L16,16 L10,16 Z"
                   to="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
               dur="0.3s"
               fill="freeze" 
               begin="startAnimation.begin" />
      <animate attributeName="d"
                   from="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
                   to="M10,0 L16,0 L16,16 L10,16 Z"
               dur="0.3s"
               fill="freeze" 
               begin="reverseAnimation.begin" />
    </path>

    <!--  controls -->
    <!-- these are on top of the visible icon. Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="16" cy="16" r="16" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 16" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="16" cy="16" r="0" fill-opacity="0">
      <animate dur="0.001s" id="reverseAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.001s" attributeName="r" values="0; 16" begin="startAnimation.end"  fill="freeze"  />
    </circle>
  </svg>
  </body>
  </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...