个人中心
gpt4 book ai didi

javascript - svg 上的点击事件拒绝播放

转载 作者：行者123 更新时间：2023-11-27 23:53:40 24 4
gpt4 key购买 nike

我在 codepen 找到了这段代码我在 jsfiddle 和 codepen 上进行了测试，但是......当我将它添加到本地主机测试页面时，点击事件没有做任何事情!

<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 上，如果您将 View 更改为查看 Debug模式，它将打开一个包含页面全屏 View 的新选项卡。

查看源码，您会看到该页面包含正常的 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 上的点击事件拒绝播放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56384443/

24 4 0
文章推荐： html - Rails 管理员自定义 : embed html view into dashboard
文章推荐： javascript - Ember.js RESTAdapter : Access JSON params when setting headers
文章推荐： javascript - 无法手动打开 Jquery Datepicker
文章推荐： javascript - 5列背景DIV填充空白
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com