我对编码很陌生，我想把我的标志变成一个按钮，当你点击它时，它会自动滚动页面。
我将我的 svg 文件包装在一个按钮 /button 标签中。
我希望徽标附加一个按钮属性，这样当我向它添加 css 和 js 时，我可以将它用作播放声音的按钮。
但是当我尝试将我的 svg 包装在按钮 /button 标签中时，它会将 svg 文件更改为带有白色背景的黑色版本。
TL;DR，我想把我的 svg 标志变成一个可点击的按钮，我可以在上面编写其他操作。这可能吗？
编辑： 这是我的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewbox" content="width=device-width">
<title>
Depth.
</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
.depth {
display: flex;
align-items: center;
Justify-content: center;
width: 100%;
Height: 300px;
border: 2px;
}
.button {
display: flex;
align-items: center;
Justify-content: center;
width: 50%;
Height: 350px;
</style>
</head>
<body>
<section>
<div class="depth">
depth.
</div>
</section>
<div class="button"></div>
<div class="box">
</div>
<button class="button">
<div class="logo">
<svg
version="1.1"
id="svg9"
width="50%"
height="50%"
viewBox="0 0 1037.3333 853.33331"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs13" />
<g
id="g15">
<path
id="path177"
style="fill:currentColor;stroke-width:1.33333"
d="M 523.21195,93.300064 C 432.64207,92.477237 342.07933,108.99951 255.85063,142.41334 l 36.51953,69.28516 c 55.15594,-20.48958 113.75322,-33.56249 175.5332,-38.78516 35.22295,-2.97762 90.1254,-1.53168 130,3.42383 49.02181,6.0923 97.03463,18.07503 143.08203,35.39063 l 36.48828,-69.07618 C 748.40735,131.26305 718.53795,121.72622 688.12797,114.19459 633.82399,100.74515 578.51979,93.802535 523.21195,93.300064 Z m 349.93555,95.304686 -36.55859,68.48047 c 42.63056,24.74461 82.60565,54.4701 118.89648,88.80078 10.03721,9.49508 20.53788,18.37426 23.33399,19.73242 7.75752,3.76807 22.59102,4.18092 30.14852,0.83789 14.2306,-6.29491 23.7994,-19.86617 24.6933,-35.02344 0.8511,-14.43276 -2.0607,-19.32298 -24.3496,-40.9082 -40.42805,-39.1517 -86.41678,-73.38579 -136.1641,-101.91992 z m -713.28711,0.0879 c -2.54487,1.44145 -5.82383,3.15756 -7.95703,4.4375 -48.29249,28.97606 -92.811906,62.91887 -129.529299,98.75391 -20.752509,20.25382 -23.7291603,25.39593 -22.89453115,39.54882 0.8778791,14.88619 8.71466815,26.45901 23.08984415,34.09571 5.863664,3.11502 7.872477,3.48367 16.667968,3.05859 6.183104,-0.29882 11.957833,-1.43665 15.13086,-2.98242 2.822467,-1.37501 12.568279,-9.55856 21.65625,-18.18555 37.297678,-35.4058 77.543248,-65.48607 120.376958,-90.4004 z m 356.70899,74.27734 c -38.32406,0 -53.38748,1.14149 -87.80079,6.65039 -31.6617,5.06843 -62.81199,13.36509 -93.16992,24.08594 l 36.55274,69.3457 c 30.48623,-9.77068 62.35472,-16.53059 95.75195,-20.25 24.61818,-2.74168 72.71581,-2.74168 97.33398,0 33.4197,3.72191 65.30339,10.48804 95.80469,20.26758 l 36.61719,-69.32226 c -30.39501,-10.74182 -61.58433,-19.05195 -93.28711,-24.12696 -34.41331,-5.5089 -49.47868,-6.65039 -87.80273,-6.65039 z m 276.66796,75.31836 -36.4414,68.25782 c 27.98584,16.82593 54.68087,36.80132 80.15625,60.10351 15.71986,14.37889 21.08445,18.49027 26.46484,20.27734 24.11764,8.0106 50.91075,-11.72207 50.96875,-37.5371 0.0351,-15.62557 -7.20067,-25.04442 -42.48242,-55.30469 -24.48246,-20.998 -50.95972,-39.4881 -78.66602,-55.79688 z m -553.36328,0.0176 c -27.6955,16.30474 -54.16292,34.78874 -78.63672,55.7793 -35.28176,30.26027 -42.51752,39.67912 -42.48242,55.30469 0.022,9.80696 3.39176,18.11928 10.56446,26.05859 5.01865,5.55506 9.59388,8.64468 17.25,11.64648 5.76698,2.26112 16.55094,2.10332 23.74414,-0.34765 4.67071,-1.59147 11.1198,-6.60163 25.90429,-20.125 25.46616,-23.2939 52.15925,-43.2652 80.14453,-60.08789 z m 277.63672,93.56445 c -34.13198,-0.0629 -68.40318,4.56851 -101.83789,13.74805 l 37.27735,70.71875 c 20.46356,-4.29789 41.64738,-6.52539 63.61914,-6.52539 24.31384,0 42.04741,1.90671 63.44336,6.6543 l 37.41796,-70.83594 c -32.50546,-9.02637 -66.12265,-13.6975 -99.91992,-13.75977 z m -197.8789,55.57227 c -1.10871,0.66456 -2.75941,1.51328 -3.72852,2.12695 -20.57955,13.03176 -42.04807,29.96856 -58.22656,45.9375 -14.28784,14.10278 -15.74546,16.00374 -17.82617,23.24805 -3.88529,13.52725 -0.78757,25.34112 9.68554,36.93359 4.67415,5.17372 12.05349,9.80082 19.03321,11.93164 12.92778,3.9467 25.01236,-0.5315 40.77343,-15.10937 15.0629,-13.93211 30.72184,-26.07625 46.96875,-36.48242 z m 393.82421,0.28516 -36.44726,68.27148 c 16.04628,10.29275 31.53483,22.40265 46.78906,36.51172 14.2339,13.16535 22.44145,16.99958 34.18945,15.9707 13.61465,-1.19236 26.47412,-10.33402 33.26563,-23.64648 4.04604,-7.93087 4.73116,-16.70033 2.03711,-26.08008 -2.08072,-7.24431 -3.53834,-9.14527 -17.82617,-23.24805 -18.21517,-17.97924 -39.01942,-33.748 -62.00782,-47.77929 z M 516.56938,601.69459 c -6.31023,0 -12.59089,0.18827 -18.3418,0.53907 l 18.2207,34.5664 L 534.71,602.2278 c -5.69942,-0.34307 -11.90025,-0.53321 -18.14062,-0.53321 z m -116.81836,35.5586 c -9.90976,6.67968 -19.12462,14.04731 -27.24805,22.1914 -10.38761,10.41403 -13.59357,16.59576 -14.33984,27.64453 -0.4609,6.82389 0.0489,9.54609 2.99804,16 5.65563,12.37663 14.95472,20.54825 27.34375,24.0293 13.24061,3.72031 23.4946,-0.018 40.73242,-14.85156 2.47849,-2.13279 4.96111,-4.04131 7.44532,-5.95703 z m 233.8164,0.11718 -36.89648,69.11133 c 2.41233,1.86655 4.82534,3.71381 7.23242,5.78516 14.68027,12.6327 21.20477,15.84784 32,15.77344 21.48819,-0.14804 40.48555,-20.08099 39.07227,-40.99805 -0.74332,-11.00149 -3.96087,-17.19423 -14.33789,-27.59766 -8.07506,-8.09559 -17.22895,-15.42503 -27.07032,-22.07422 z" />
<g
aria-label="V"
transform="matrix(1.1835586,0,0,0.84490958,-2.096642,92.25225)"
id="text329"
style="font-size:991.428px;stroke-width:82.6191">
<path
d="m 676.93368,68.003535 45.21272,29.346441 a 16.09525,16.09525 71.914106 0 1 6.27916,19.227134 L 492.68772,735.8057 A 18.859227,18.859227 145.42081 0 1 475.0625,747.95508 H 401.66602 A 18.874865,18.874865 34.556998 0 1 384.03139,735.80929 L 148.54869,118.68876 a 16.382714,16.382714 107.54668 0 1 6.14024,-19.419181 l 45.13972,-30.470797 a 10.270031,10.270031 17.670537 0 1 15.35694,4.892324 L 433.54098,653.43975 a 4.8980237,4.8980237 0.00667468 0 0 9.16698,0.001 L 661.44439,73.090428 a 10.464424,10.464424 161.81911 0 1 15.48929,-5.086893 z"
style="font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans';display:inline;fill:currentColor"
id="path1160" />
</g>
</g>
</svg>
</div>
</button>
</body>
</html>
这是我的CSS代码：
html { font-family: "Helvetica Neue", Arial, sans-serif; font-weight:850; color: #ECF2FF;
background: linear-gradient(-45deg, #1d002d, #4a0066, #1d002d);
background-size: 400% 400%;
animation: gradient 9s ease infinite;
height: 100vh;}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.helvetica {font-family: "Helvetica Neue", Arial, sans-serif; font-weight:850; color: #ECF2FF; text-align:center;
}
.depth {
letter-spacing: -6px;
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
font-size: 100px;
top:550px;
font-family: "Helvetica Neue", Arial, sans-serif; font-weight:850;color: #ECF2FF; text-align:center;
}
}
.depth:active {color:#20006a
}
.logo {
height: 100%;
width: 100%;
display:flex;
align-items: center;
justify-content: center;
position:fixed; top:-50px;
transition-property:Transform ;
transition-duration:0.3s;
transition-timing-function:ease-in-out ;
transition-delay: 0s;
color:0.4s;
}
.logo:hover {transform: translateY(10px);
color: #20002a; cursor: pointer;>
}
.logo:active {transform: translateY(20px);}
#logo { display: inline-block;
width: auto;}
不好意思我的代码乱七八糟的，我前两天才开始，还在摸索写得干干净净的窍门！ 谢谢。
这里是你的问题答案。我觉得对你有帮助谢谢。
document
.getElementById("my-button")
.addEventListener("click", function () {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth",
});
}); #my-button {
background-color: #007bff;
border: none;
padding: 20px 20px 20px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
width: 300px;
margin: auto;
position: relative;
}
#my-button span {
font-size: 20px;
font-weight: bold;
color: white;
}
#my-button i {
font-size: 25px;
position: absolute;
right: 30px;
color: #ffe100;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<title></title>
</head>
<body>
<button id="my-button">
<span> Hear your button <i class="fa-brands fa-google"></i></span>
</button>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni, facilis
quis quibusdam hic nobis accusantium consequatur. Fuga obcaecati et rem,
sint qui, repudiandae voluptate itaque alias officiis ea fugit, ad
mollitia non minima maxime laborum veniam delectus! Voluptas maiores,
magni aspernatur non alias consequatur quisquam deleniti enim fugiat nemo
ex voluptate odit qui dignissimos repellendus. Atque amet, unde quas nobis
beatae fugiat repudiandae? Optio vitae ratione voluptates atque facilis
impedit quae voluptatibus iste sunt dolorem error necessitatibus deserunt
praesentium, perspiciatis exercitationem porro veritatis beatae tempora
itaque, sed officiis qui explicabo cum quod. Vitae necessitatibus
excepturi rerum iure accusamus dolor voluptatibus similique facere sed.
Illo pariatur id nesciunt dignissimos. Possimus omnis, asperiores officia
dignissimos dolore fugit iste, quidem et ipsum modi ab obcaecati vero
autem? Distinctio voluptatum tenetur ea perspiciatis maxime incidunt
minima unde veritatis dolore quasi quas ex, possimus, quam alias iste
harum id numquam, itaque sed consequuntur magni. Illo tempora accusantium,
odio pariatur, totam veniam recusandae, impedit aliquam molestiae sapiente
vel. Nulla vitae animi adipisci ex, sit maiores esse nesciunt quidem
possimus alias, soluta suscipit perspiciatis deserunt obcaecati unde a
itaque harum provident porro maxime quam neque nobis? Atque nobis
blanditiis beatae explicabo ad dignissimos expedita rerum dolorem aliquam,
in officia enim accusantium incidunt rem vel, vitae molestiae adipisci eum
cupiditate tempora! Modi dignissimos nobis, laudantium expedita
exercitationem, saepe unde ipsa maiores consectetur minus molestias ex
sunt excepturi amet numquam obcaecati rem, reprehenderit non. Sit
consectetur accusamus voluptatum cum? Ducimus laboriosam vel consequatur
itaque magnam animi amet? Dicta culpa praesentium autem, ipsa totam unde
quasi, vel voluptatem ut deserunt veniam laboriosam, obcaecati adipisci!
Quae unde numquam enim voluptas temporibus, vero, corporis doloremque
aliquam nobis ducimus sunt nemo reiciendis sequi sed dignissimos
blanditiis tempora. Suscipit tenetur ratione officiis temporibus
voluptatem tempore alias, quos nemo possimus et ducimus excepturi, ex
doloremque porro enim fuga dolorum corrupti ullam! Iure rerum facilis
voluptatibus deserunt porro perferendis fuga voluptate ipsam accusantium
vel, totam libero temporibus, doloribus, facere nam consequuntur possimus
iste officia soluta eligendi et obcaecati odio. Quos molestias inventore
corrupti itaque. Voluptatibus impedit nemo, nihil vel voluptatum quidem ex
inventore expedita sed nam aliquid facilis laboriosam. Aperiam odit
facere, voluptatem reprehenderit iure voluptate pariatur quo. Dolore rerum
natus nulla. Harum ex quis tenetur? Corporis amet nobis magnam porro vero
quisquam, iste vel veniam iusto reprehenderit mollitia sit eos non
repudiandae pariatur ab ad beatae voluptatum corrupti numquam
exercitationem tempore aliquam recusandae adipisci. Rem ut error ratione
eos at veritatis aspernatur dolor possimus nostrum non numquam odit
accusantium, ipsum voluptatum ex laudantium veniam inventore quos, natus
tempore quibusdam maiores quasi nam officia? Mollitia, placeat! Eius,
temporibus ipsam, eaque, perferendis unde alias obcaecati nam nostrum sed
illo eveniet sint dicta fugit ab iste at veritatis quod voluptate odit
molestias. Ut eos, dolore sunt sapiente fugiat fugit saepe doloribus nam,
consequuntur, magnam dicta. Neque, aliquid ratione, tenetur vero veniam
magnam quo fugiat sit commodi dolores explicabo inventore fuga, delectus
voluptates error incidunt sapiente aut numquam quod quaerat. Expedita,
deleniti. Laudantium consequuntur expedita autem enim iure nobis numquam
corrupti placeat, ut delectus hic distinctio ex odio dolorum laborum nulla
ullam blanditiis, provident tenetur, impedit earum velit. Enim quae quo
magnam harum ab magni doloribus vero non, voluptatibus eaque nulla sit
quibusdam modi velit asperiores dolor officiis fugit? Modi veniam fuga
vero! Error eligendi tempora itaque amet, nulla temporibus a id beatae
recusandae inventore. Deleniti atque non nobis beatae sunt eum placeat,
saepe reiciendis consectetur molestias fugiat numquam! Doloremque enim
cumque ipsa deleniti ducimus libero dicta quo sunt fugit rerum, nobis
assumenda nesciunt porro reprehenderit expedita nulla suscipit
voluptatibus dolor, quam ea totam tempora. Laudantium debitis culpa
repudiandae facilis nam ipsa omnis vel illum expedita aspernatur, ut,
saepe atque distinctio, ea obcaecati placeat quis deserunt tenetur quia
consequuntur rerum fugit. Voluptas deleniti eligendi eius dignissimos
placeat obcaecati, fugit est incidunt porro accusamus at veritatis dolorem
voluptate illo ducimus! Repellat porro est et, ab similique laborum veniam
commodi sit, assumenda molestiae quibusdam debitis ipsam architecto? Harum
laborum quos enim quo, odit rerum dolorem saepe ut! Dicta, quis. Sunt
laudantium quidem reiciendis atque, animi natus facilis laborum facere,
velit ea fuga at veritatis. Nesciunt saepe quaerat minus reiciendis
consequuntur repellendus consequatur sapiente praesentium dolores facere
magni ipsum reprehenderit itaque et sint repellat ullam ipsa, accusamus
vitae eum odio velit. Velit sequi ducimus cupiditate qui similique minima
veritatis sapiente pariatur doloribus, voluptas esse inventore vitae,
harum quasi. Molestias eveniet quis aut, dolor, deserunt quisquam sunt
quas ut amet, nesciunt quidem fugiat veniam maxime impedit totam rerum
natus? Illum, voluptate. Laboriosam quo delectus alias soluta totam,
similique quidem nihil odit deleniti dolores perspiciatis et impedit porro
autem labore dolor possimus magni animi, ipsam quasi expedita unde esse
deserunt! Exercitationem fuga impedit sunt ipsum sapiente veritatis,
corporis reprehenderit magni aut quidem quisquam nisi nihil consectetur,
asperiores vero sequi nemo iste qui nostrum dolor. Temporibus incidunt
dolorum labore iusto accusantium saepe? Quaerat cum, pariatur, quas vitae,
minus saepe quod ipsum recusandae laudantium excepturi atque obcaecati
asperiores voluptates quis suscipit? Doloremque consequuntur quibusdam
fugit ratione aliquam atque nobis, minus expedita. Optio animi eius,
provident quod officia et quibusdam debitis facilis recusandae, eligendi
dolorem dicta velit mollitia sint corporis enim consequatur? Architecto
ab, odio fugiat repudiandae aliquid ut id. Animi perferendis, iusto veniam
expedita laborum quae voluptas amet vitae itaque consectetur earum
possimus sed dolore nesciunt mollitia illo unde facilis necessitatibus
adipisci cupiditate. Ad nesciunt repellat eligendi voluptates accusantium
hic, dolorem pariatur ab a quae possimus nostrum mollitia debitis, nobis
expedita repellendus, sequi aperiam. Et consequuntur amet, quibusdam modi
iure impedit neque nostrum veritatis eligendi similique facilis magnam
dolorum totam dolorem explicabo, ut error minima ab inventore? Magni
dolore inventore facere qui, a eos voluptas tempore? Accusantium
asperiores corrupti et possimus laborum id dolorem. Officia aut laboriosam
iste nihil dolor nulla, quisquam repudiandae vitae perferendis aliquid
incidunt ullam vero aperiam iusto, ipsa qui deleniti inventore, facere
ratione quasi eum quibusdam minus porro earum? Maiores vero unde
praesentium. Beatae voluptas aperiam reiciendis aspernatur nesciunt
quaerat quam? Voluptatem fugit nemo beatae repudiandae in qui ab maxime
quae cum eos, similique nesciunt animi cumque facilis reiciendis mollitia
dicta aperiam autem enim commodi. Sed voluptatum dolorum cumque animi,
ratione perferendis laborum accusamus eius odio quaerat rerum ipsam
voluptates, tempore corrupti necessitatibus et magnam culpa. Numquam
asperiores sint ad rerum vero a, voluptates consequuntur dolore veniam
earum molestiae eum! Provident voluptates sit molestiae nam reiciendis,
cupiditate nesciunt fugit blanditiis accusamus? Repellat dicta beatae
aspernatur, voluptate dolores, iste nihil accusantium aliquid aut corporis
officia esse iure repudiandae delectus expedita vel. Beatae quae eligendi
blanditiis? Minus, ipsa repellendus odio, vero beatae eaque sed eveniet,
laudantium recusandae necessitatibus atque ab distinctio quas tempora!
Doloremque accusantium mollitia rem voluptas, earum dolorem cupiditate
nobis nostrum itaque culpa ut temporibus laboriosam ullam error quibusdam
quas. Nemo veritatis officia odit voluptate voluptates amet consectetur
animi quibusdam saepe totam ratione dolores ex, expedita eum at esse
necessitatibus ipsa, nesciunt quidem quia suscipit omnis tempora iure.
Consequatur, fuga. Quis soluta eveniet iste totam accusamus est similique
modi quasi corrupti culpa ratione vero laudantium saepe quos beatae
molestiae aut ut, consequatur obcaecati, sint vitae reiciendis vel? Quae
saepe vero, assumenda sit amet ipsam. Quae suscipit minima id nobis quasi
sit, numquam atque sunt, delectus architecto maxime nemo? Ea, quam? Sed
possimus expedita adipisci modi minus dolores, eligendi quos pariatur
nobis quod. Dignissimos officiis dolore voluptate nesciunt error fugiat
ipsum quo dolor sint sed provident, laudantium laboriosam delectus maiores
ut sit dolorem cumque iure adipisci molestiae asperiores magni. Deleniti
aliquam in optio cupiditate mollitia neque, earum molestias porro amet
animi vero non deserunt quod, fugit alias fugiat voluptatibus ipsam
ducimus! Inventore facilis hic in harum vero deleniti atque quaerat
eligendi ex laboriosam iusto minima quos veritatis odit obcaecati placeat
eveniet quam, veniam quo mollitia, nulla dolor? Dicta eveniet, nulla
veritatis porro cupiditate possimus architecto iusto aliquam accusamus
recusandae tempora corrupti temporibus aspernatur ullam unde eum placeat
quo necessitatibus consectetur harum a minus nam, ipsa suscipit! Animi
saepe tempore ullam! Sit deserunt asperiores quos voluptate aut autem
beatae ut dicta quasi voluptatum.atur doloremque, magni quaerat
accusantium corporis asperiores libero? Alias, harum dolores? Possimus us
praesentium accusantium ipsum nobis quod. Dignissimos officiis dolore
voluptate nesciunt error fugiat ipsum quo dolor sint sed provident,
laudantium laboriosam delectus maiores ut sit dolorem cumque iure adipisci
molestiae asperiores magni. Deleniti aliquam in optio cupiditate mollitia
neque, earum molestias porro amet animi vero non deserunt quod, fugit
alias fugiat voluptatibus ipsam ducimus! Inventore facilis hic in harum
vero deleniti atque quaerat eligendi ex laboriosam iusto minima quos
veritatis odit obcaecati placeat eveniet quam, veniam quo mollitia, nulla
dolor? Dicta eveniet, nulla veritatis porro cupiditate possimus architecto
iusto aliquam accusamus recusandae tempora corrupti temporibus aspernatur
ullam unde eum placeat quo necessitatibus consectetur harum a minus nam,
ipsa suscipit! Animi saepe tempore ullam! Sit deserunt asperiores quos
voluptate aut autem beatae ut dicta quasi voluptatum.atur doloremque,
magni quaerat accusantium corporis asperiores libero? Alias, harum
dolores? Possimus us praesentium accusantium ipsum nobis quod. Dignissimos
officiis dolore voluptate nesciunt error fugiat ipsum quo dolor sint sed
provident, laudantium laboriosam delectus maiores ut sit dolorem cumque
iure adipisci molestiae asperiores magni. Deleniti aliquam in optio
cupiditate mollitia neque, earum molestias porro amet animi vero non
deserunt quod, fugit alias fugiat voluptatibus ipsam ducimus! Inventore
facilis hic in harum vero deleniti atque quaerat eligendi ex laboriosam
iusto minima quos veritatis odit obcaecati placeat eveniet quam, veniam
quo mollitia, nulla dolor? Dicta eveniet, nulla veritatis porro cupiditate
possimus architecto iusto aliquam accusamus recusandae tempora corrupti
temporibus aspernatur ullam unde eum placeat quo necessitatibus
consectetur harum a minus nam, ipsa suscipit! Animi saepe tempore ullam!
Sit deserunt asperiores quos voluptate aut autem beatae ut dicta quasi
voluptatum.atur doloremque, magni quaerat accusantium corporis asperiores
libero? Alias, harum dolores? Possimus us praesentium accusantium ipsum
</p>
</body>
</html>