- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试制作一个播放和停止按钮。我不知道如何在单击时将三 Angular 形(它是一条路径)变形为方形(它是一条路径)。一次只显示一个形状。谁能帮忙?
<svg class="playStop" 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 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
</style>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</svg>
最佳答案
我认为一种方法是在 defs
中定义两个路径,然后使用 use xlink:href="#shapeName"
和一个 onclick 处理程序来切换该属性或相应的 DOM 属性(如果支持)..
具有完全实现的 SVG DOM 的 use
元素对象有一个 href
属性和一个可以读取和设置的 baseVal
属性,所以在里面就我测试过的浏览器而言(使用 Firefox、Chrome、IE 和 Edge on Window)我们可以简单地切换该属性,请参阅 https://jsfiddle.net/4x0gnkob/获取在线示例。
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" 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 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="this.href.baseVal = this.href.baseVal == '#playTriangle' ? '#stopSquare' : '#playTriangle';"></use>
</svg>
另一种方法是切换 DOM 属性,这在 HTML5 环境中似乎有点复杂,因为我认为我可以在一行中使用 setAttributeNS
和 getAttributeNS
来解决它,经过一些测试,似乎在 HTML5 中 getAttribute('xlink:href')
工作得更好,所以完整的代码试图测试哪个函数返回一个值。
function toggleLink(element, value1, value2) {
var xlinkNS = 'http://www.w3.org/1999/xlink';
var linkName = 'xlink:href';
var oldValue = element.getAttributeNS(xlinkNS, linkName) || element.getAttribute(linkName);
if (element.hasAttributeNS(xlinkNS, 'href')) {
element.setAttributeNS(xlinkNS, linkName, oldValue == value1 ? value2 : value1)
}
else {
element.setAttribute(linkName, oldValue == value1 ? value2 : value1);
}
}
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" 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 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="toggleLink(this, '#stopSquare', '#playTriangle')"></use>
</svg>
关于javascript - 如何通过单击命令将一个 SVG 路径元素变形为另一个?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34567002/
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
我有一系列 SQL 命令,我想在大约 40 个不同的表上运行。必须有一种方法可以在不编写 40 条不同命令的情况下执行此操作... 我在 SQL Server 中运行它。所有表都有不同的名称,我要操作
我习惯在 PHP 中使用命令“mysql_insert_id()”来返回插入到我的数据库中的最后一行的 id。 在 C# 中的 SQLite 中是否有等效的命令? 谢谢! -阿德娜 最佳答案 选择 l
试图找出一种方法来回填 ds 分区 Hive 表的分区。 我知道如何从 CLI 运行 Hive 命令,例如 $HIVE_HOME/bin/hive -e 'select a.col from tab1
我有 .bat 文件。看起来像下一个 ....many commands1 ftp -i -s:copy.txt ...many commands2 copy.txt 包含下一个命令 open ...
基本上我想输入 show 并检查是否有 show 命令或别名已定义并触发它,如果未定义则触发 git show 。 例如 rm 应该执行 rm 但 checkout 应该执行 git checkout
我公司的主数据库是 iSeries 机器,我已经非常习惯使用 DB2 命令和结构。我现在正在尝试做一个小项目,更新一个包含超过 300 万条记录的表。我想出一种比较和“清理”数据的更快方法是使用 My
我想在带有 Node 的终端中制作一个简单的按钮板,并“blessed”用于连接或运行不同的命令。 ----------------------------------------------- _
我们有一个 selenium IDE 脚本,正在转换为 python webdriver。以下命令未转换: [openWindow | http://mywebsite.com/index.php |
我正在学习这个关于从 GIT HUB 下载和安装 Web 文件的在线教程。我进入主题:启动我们的静态网站,系统提示我输入命令以下载和安装 Web 文件。但是,当我输入命令 yarn install 时
我在 shell 脚本中使用 elif 命令时遇到问题,就像在 fortran 中一样。 我有 100 家公司的员工名单。我想屏蔽那些员工少于 500 人的公司。我的脚本是 rm -f categor
我有一些 Linux 命令可以生成 token 。我在 Linux 机器上使用操作系统库形式的 Python 自动化了这些命令。它工作正常。 但是,当我在 Windows 中尝试相同的代码时,它没有返
本文分享自华为云社区《Git你有可能不知道交互式暂存》,作者:龙哥手记。 本节中的几个交互式 Git 命令可以帮助你将文件的特定部分组合成提交。 当你在修改了大量文件后,希望这些改动能拆分为若干提交而
我想知道如何使用 IN 比较语法来做到这一点。 当前的 SQL 查询是: select * from employee where (employeeName = 'AJAY' and month(e
我在这个位置安装了 Hadoop /usr/local/hadoop$ 现在我想列出 dfs 中的文件。我使用的命令是: hduser@ubuntu:/usr/local/hadoop$ bin/ha
是否有一个单一的 docker 命令可用于清除所有内容?如果正在运行,请停止所有容器、删除所有图像、删除所有卷...等。 最佳答案 我认为没有一个命令可以做到这一点。您首先需要停止所有容器使用 $ d
我基本上是在 clojure/nrepl 模式中寻找与 C-u C-x C-e 或 C-c C-p 等效的 Scheme。 我想要一个 C-x C-e 将输出打印到缓冲区,而不是仅仅在 repl 中。
我可以在 vim 中使用 pudb(一个 ncurses Python 调试器),因为,例如,:!python %在实际的终端窗口中运行。我更喜欢使用 gvim,但 gvim 运行 :!python
我正在尝试编写一个 FFMPEG 命令: 取为 输入 一个视频 input.mp4 和一个图像 pic.jpg 作为 输出 将 input.mp4 拆分为 20 秒的视频,按顺序重命名;对于每个分割视
我想转储视频每帧的比特率。我正在尝试使用 -vstats 获取此信息命令。当我运行此命令时 - ffmpeg -i input.mp4 -vstats 它显示至少应该定义一个文件。 如果有人能建议我任
我是一名优秀的程序员,十分优秀!