我正在尝试制作播放和停止按钮.我不知道如何在点击时将三角形形状(它是一条路径)变形为方形(它是一条路径).仅一次显示一个形状.有人可以帮忙吗？
<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>
这是关系到一前一后在这里.但是,我认为这是一项重大任务.所以我把它分解成更小的块.
我制作了一个简单的SVG图像,其中包含一个"路径"和一个"矩形"元素.用户可以通过向上和向下滚动页面来打开和关闭窗口(向下滚动页面以打开和关闭页面以关闭/"展开".但是,两个元素同时"绘制"/动画.我想要做的是当用户向下滚动页面,线条路径绘制,然后"rect"元素绘制(后),所以它更流畅和按时间顺序.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>the single line</title>
<link rel="stylesheet" type="text/css" href="line.css">
<style>
svg {
position: fixed;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 50%;
}
/*.line{
stroke-dashoffset:850;
stroke-dasharray: 850;
}
.box {
stroke-dashoffset:1852;
stroke-dasharray: 1852;
}*/
.all{
stroke-dashoffset:2702;
stroke-dasharray: 2702;
}
.straightLine {
height: 3000px;
position: relative;
width: 360px;
margin: 40vh auto 0 auto;
}
</style>
</head>
<body>
<main role="article" title="line">
<div class="straightLine">
<svg 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" …为了使我的内联SVG图像更容易被谷歌搜索,你可以在svg元素中添加alt/title属性/属性,如"path""circle""line"等？
我已经知道你可以在"svg"标签中使用标题标签,就像这样..
<svg>
<title>this is a title tag.</title>
</svg>
以下是我所谈论的一个例子.
<svg version="1.1" id="Layer_1">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path class="st0" title=“this is what I am talking about” d="M567,1136.2l37,10.9c13.3,3.9,27.2,3.1,39.9-2.4l0.6-0.3"/>
<line id="hi2" class="st5" alt=“This is what I am Talking About” x1="72" y1="-169.7" x2="108" y2="-169.7"/>
</svg>