click事件

click事件

关注
发信
关注(28)粉丝(399)

javascript - svg上的click事件拒绝播放

我在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%;
}


并修改了第一行

<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">


仍然没有结果！

最佳答案

在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>

关于javascript - svg上的click事件拒绝播放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56384443/

10-09 23:36
Powered by LMLPHP ©2024 click事件 0.044089