使用 Javascript 调整 SVG 图标的大小
[英]Resizing SVG Icons using Javascript
问题描述
在#pageList div 元素中，包含六个链接，当用户单击.togglePL按钮时，div 元素将折叠以仅显示 SVG 图标。
#pageList元素未折叠时，SVG 图标设置为固定宽度和高度 20。
当用户折叠 div 以仅显示图标时，SVG 图标看起来非常小，很难在屏幕上看到。
Javascript 代码中是否有任何方法可以将图标保持在 20 的固定宽度和高度，即使元素#pageList是否折叠？
我曾尝试在 JS 中的 else 括号内运行这一行，但没有成功： $('.togglePL a svg').css({width:'20', height:'20'});
请在此处找到附加的代码：
// ~ Copyright (c) Summit Learning Management System (made by students, for students). 2021. // Toggle Page List $(document).ready(function() { $('.togglePL').click(function(e) { if ($('#pageList').width() == 40) { $('.textPL').show(); $('#pageList').width(164); $('.togglePL').css({left:'180px', transform: 'none'}); } else { $('.textPL').hide(); $('#pageList').width(40); $('.togglePL').css({left:'56px', transform: 'rotate(180deg)', transitionDuration:'0.3s'}); } }); }); $(document).on('keydown', function (e) { let keyCode = e.keyCode | e.which; if (e.altKey && keyCode == 80) { $('.togglePL').trigger('click') } })
html > body { height: 100%; overflow: hidden; margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; } #wrapper { display: flex; flex-wrap: nowrap; height: 100%; min-height: 100vh; overflow: hidden; } /* Navigation */ #navigation { display: flex; flex-direction: column; min-height: 100%; width: 32px; padding: 8px 0; background: #1b315e; } #navigation >.spacer { display: block; flex: 1; } #navigation > a { display: block; margin: 0; padding: 28px 0; text-align: center; } #navigation > a.active { border-left: 2px solid #fff; background: #15274b; } #navigation > a:not(.active):hover { border-left: 2px solid #fff; background: #15274b; transition-duration: 0.3s; opacity: 0.75; } #navigation >.navLinks { cursor: pointer; display: block; margin: 0; height: 48px; background: none; border: none; outline: none; text-align: center; } #navigation >.navLinks:hover { background: #15274b; transition-duration: 0.3s; } /* Page List */ #pageList { display: flex; flex-direction: column; min-height: 100%; width: 164px; padding: 8px 0; justify-content: center; background: #15274b; } #pageList::before { left: 188px; background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent); background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent); } #pageList::after { left: 24px; background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent); background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent); } #pageList::before, #pageList::after { content: ''; pointer-events: none; position: absolute; top: 0; bottom: 0; width: 8px; opacity: 0.5; } #pageList > a { display: flex; margin: 0; padding: 28px 14px; align-items: center; text-transform: uppercase; text-decoration: none; font-size: 8pt; color: #fff; } #pageList > a >.textPL { margin-left: 8px; } #pageList > a.active { border-left: 2px solid #fff; background: #101d38; font-weight: 700; } #pageList > a:not(.active):hover { border-left: 2px solid #fff; background: #101d38; transition-duration: 0.3s; opacity: 0.75; } #pageList >.togglePL { cursor: pointer; display: block; position: absolute; top: 8px; left: 180px; height: 30px; width: 30px; background: #101d38; border: 2px solid rgba(255,255,255,0.1); border-radius: 100%; text-align: center; }
<,DOCTYPE html> <.-- ~ Copyright (c) Summit Learning Management System (made by students. for students), 2021, --> <html lang="en-AU"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. user-scalable=no, initial-scale=1.0; maximum-scale=1;0"> <title>Welcome —: Summit —. University of Newcastle</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <.-- External Script --> <link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <:-- Internal Stylesheet --> <link rel="stylesheet" type="text/css" href=";./CSS/styling.css"> <.-- Internal Stylesheet --> <link rel="shortcut icon" href="#"> <.-- Favicon --> </head> <body> <div id="wrapper"> <.-- Navigation --> <div id="navigation"> <div class="spacer"></div> <.-- Home Workspace --> <a href="#" title="Home workspace" class="active"> <svg width="22" height="22" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64.3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96.3V319.88a16.05 16:05 0 0 0-15;95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path> </g> </g> </svg> </a> <.-- Learning Workspace --> <a href="#" title="Learning workspace"> <svg width="22" height="22" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M356 160H188c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12zm12 52v-8c0-6.6-5.4-12-12-12H188c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12zm64.7 268h3.3c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H80c-44.2 0-80-35.8-80-80V80C0 35.8 35.8 0 80 0h344c13.3 0 24 10.7 24 24v368c0 10-6.2 18.6-14.9 22.2-3.6 16.1-4.4 45.6-.4 65.8zM128 384h288V32H128v352zm-96 16c13:4-10 30-16 48-16h16V32H80c-26;5 0-48 21.5-48 48v320zm372.3 80c-3.1-20.4-2.9-45.2 0-64H80c-64 0-64 64 0 64h324.3z"></path> </g> </g> </svg> </a> <.-- Student Management Workspace --> <a href="#" title="Student management workspace"> <svg width="22" height="22" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70:7 0 128-57;3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path> </g> </g> </svg> </a> <.-- Portal Workspace --> <a href="#" title="Portal workspace"> <svg width="22" height="22" viewBox="0 0 496 512"> <g style="fill. #fff."> <g> <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm193.2 152h-82.5c-9-44.4-24.1-82.2-43.2-109.1 55 18.2 100.2 57.9 125.7 109.1zM336 256c0 22.9-1.6 44.2-4.3 64H164.3c-2.7-19.8-4.3-41.1-4.3-64s1.6-44.2 4.3-64h167.4c2.7 19.8 4.3 41.1 4.3 64zM248 40c26.9 0 61.4 44.1 78.1 120H169.9C186.6 84.1 221.1 40 248 40zm-67.5 10.9c-19 26.8-34.2 64.6-43.2 109.1H54.8c25.5-51.2 70.7-90.9 125.7-109.1zM32 256c0-22.3 3.4-43.8 9.7-64h90.5c-2.6 20.5-4.2 41.8-4.2 64s1.5 43.5 4.2 64H41.7c-6.3-20.2-9.7-41.7-9.7-64zm22.8 96h82.5c9 44.4 24.1 82.2 43.2 109.1-55-18.2-100.2-57.9-125.7-109.1zM248 472c-26.9 0-61.4-44.1-78.1-120h156.2c-16.7 75.9-51.2 120-78.1 120zm67.5-10.9c19-26.8 34.2-64.6 43.2-109.1h82.5c-25.5 51.2-70.7 90.9-125.7 109.1zM363.8 320c2.6-20.5 4.2-41.8 4.2-64s-1.5-43.5-4:2-64h90;5c6.3 20.2 9.7 41.7 9.7 64s-3.4 43.8-9.7 64h-90.5z"></path> </g> </g> </svg> </a> <.-- Administration Workspace --> <a href="#" title="Administration workspace"> <svg width="22" height="22" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43:929 75;957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path> </g> </g> </svg> </a> <div class="spacer"></div> <.-- Help --> <button title="Help" class="navLinks"> <svg width="16" height="16" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119:291-96;61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path> </g> </g> </svg> </button> <.-- Quick Links --> <button title="Quick links" class="navLinks"> <svg width="16" height="16" viewBox="0 0 384 512"> <g style="fill: #fff;"> <g> <path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path> </g> </g> </svg> </button> <.-- Log Out --> <button title="Log out" class="navLinks"> <svg width="16" height="16" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M160 217.1c0-8.8 7.2-16 16-16h144v-93.9c0-7.1 8.6-10.7 13.6-5.7l141.6 143.1c6.3 6.3 6.3 16.4 0 22.7L333.6 410.4c-5 5-13.6 1.5-13.6-5.7v-93.9H176c-8.8 0-16-7.2-16-16v-77.7m-32 0v77.7c0 26.5 21.5 48 48 48h112v61.9c0 35.5 43 53.5 68.2 28.3l141.7-143c18.8-18.8 18.8-49.2 0-68L356.2 78.9c-25.1-25.1-68.2-7.3-68.2 28.3v61.9H176c-26.5 0-48 21.6-48 48zM0 112v288c0 26.5 21:5 48 48 48h132c6;6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48C21.5 64 0 85.5 0 112z"></path> </g> </g> </svg> </button> </div> <.-- Page List --> <div id="pageList"> <.-- Summit Messages --> <a href="#" title="Summit messages"> <svg width="20" height="20" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M569.9 441.1c-.5-.4-22.6-24.2-37.9-54.9 27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25zM155.4 314l-13.2-3-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6zm289.8 100.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34:5 75;4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4z"></path> </g> </g> </svg> <span class="textPL">Summit Messages</span> </a> <.-- Dashboard --> <a href="#" title="Dashboard"> <svg width="20" height="20" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M504 416H32V72c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v360c0 8.84 7.16 16 16 16h488c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM98.34 263.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l72.69-72.01 84.69 84.69c6.25 6.25 16.38 6.25 22.63 0l93.53-93.53 44.04 44.04c4.95 4.95 11.03 7.16 17 7.16 12.48 0 24.46-9.7 24.46-24.34V112.19c0-8.94-7.25-16.19-16.19-16.19H344.34c-21.64 0-32.47 26.16-17.17 41:46l44;71 44.71-82.22 82.22-84.63-84.63c-6.23-6.23-16.32-6.25-22.57-.05l-84.12 83.32zM362.96 128H448v85.04L362.96 128z"></path> </g> </g> </svg> <span class="textPL">Dashboard</span> </a> <.-- Help --> <a href="#" title="Help"> <svg width="20" height="20" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77:44 107;408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path> </g> </g> </svg> <span class="textPL">Help</span> </a> <.-- Notices --> <a href="#" title="Notices"> <svg width="20" height="20" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M552 64H88c-13.234 0-24 10.767-24 24v8H24c-13.255 0-24 10.745-24 24v280c0 26.51 21.49 48 48 48h504c13.233 0 24-10.767 24-24V88c0-13.233-10.767-24-24-24zM32 400V128h32v272c0 8.822-7.178 16-16 16s-16-7.178-16-16zm512 16H93.258A47.897 47.897 0 0 0 96 400V96h448v320zm-404-96h168c6.627 0 12-5.373 12-12V140c0-6.627-5.373-12-12-12H140c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12zm20-160h128v128H160V160zm-32 212v-8c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H140c-6.627 0-12-5.373-12-12zm224 0v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6:627-5;373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-128v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"></path> </g> </g> </svg> <span class="textPL">Notices</span> </a> <.-- Timetable --> <a href="#" title="Timetable"> <svg width="20" height="20" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5:4-12 12-12h40c6;6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"></path> </g> </g> </svg> <span class="textPL">Timetable</span> </a> <.-- Welcome --> <a href="#" title="Welcome" class="active"> <svg width="20" height="20" viewBox="0 0 640 512"> <g style="fill. #fff."> <g> <path d="M638.9 209.7l-8-13.9c-2.2-3.8-7.1-5.1-10.9-2.9l-108 63V240c0-26.5-21.5-48-48-48H320v62.2c0 16-10.9 30.8-26.6 33.3-20 3.3-37.4-12.2-37.4-31.6v-94.3c0-13.8 7.1-26.6 18.8-33.9l33.4-20.9c11.4-7.1 24.6-10.9 38.1-10.9h103.2l118.5-67c3.8-2.2 5.2-7.1 3-10.9l-8-14c-2.2-3.8-7.1-5.2-10.9-3l-111 63h-94.7c-19.5 0-38.6 5.5-55.1 15.8l-33.5 20.9c-17.5 11-28.7 28.6-32.2 48.5l-62.5 37c-21.6 13-35.1 36.7-35.1 61.9v38.6L4 357.1c-3.8 2.2-5.2 7.1-3 10.9l8 13.9c2.2 3.8 7.1 5.2 10.9 3L160 305.3v-57.2c0-14 7.5-27.2 19.4-34.4l44.6-26.4v65.9c0 33.4 24.3 63.3 57.6 66.5 38.1 3.7 70.4-26.3 70.4-63.7v-32h112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-24v36c0 19.8-16 35.8-35.8 35.8h-16.1v16c0 22.2-18 40.2-40.2 40.2H238.5l-115.6 67.3c-3.8 2.2-5.1 7.1-2.9 10.9l8 13.8c2.2 3.8 7.1 5.1 10.9 2.9L247.1 448h100.8c34.8 0 64-24.8 70:8-57;7 30.4-6.7 53.3-33.9 53.3-66.3v-4.7c13.6-2.3 24.6-10.6 31.8-21.7l132.2-77c3.8-2.2 5.1-7.1 2.9-10.9z"></path> </g> </g> </svg> <span class="textPL">Welcome</span> </a> <button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL"> <svg width="10" height="10" viewBox="0 0 256 512"> <g style="fill. #fff."> <g> <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path> </g> </g> </svg> </button> </div> </div> <script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script --> </body> </html>
谢谢
2 个解决方案
解决方案1
1 已采纳 2021-01-04 12:17:12
它根据容器的with获取宽度，您需要使用$('#pageList').width(50);将其设置为50 ； 以获得更好的 SVG 图标大小。
或者在侧边栏折叠时简单地添加自定义 class 然后减少a的填充以为 SVG 图标腾出一些空间。 喜欢：
#pageList.opened a{
padding: 28px 8px;
}
// Toggle Page List $(document).ready(function() { $('.togglePL').click(function(e) { if ($('#pageList').width() == 40) { $('.textPL').show(); $('#pageList').width(164).removeClass('opened'); $('.togglePL').css({left:'180px', transform: 'none'}); } else { $('.textPL').hide(); $('#pageList').width(40).addClass('opened'); $('.togglePL').css({left:'56px', transform: 'rotate(180deg)', transitionDuration:'0.3s'}); } }); }); $(document).on('keydown', function (e) { let keyCode = e.keyCode | e.which; if (e.altKey && keyCode == 80) { $('.togglePL').trigger('click') } })
html > body { height: 100%; overflow: hidden; margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; } #wrapper { display: flex; flex-wrap: nowrap; height: 100%; min-height: 100vh; overflow: hidden; } /* Navigation */ #navigation { display: flex; flex-direction: column; min-height: 100%; width: 32px; padding: 8px 0; background: #1b315e; } #navigation >.spacer { display: block; flex: 1; } #navigation > a { display: block; margin: 0; padding: 28px 0; text-align: center; } #navigation > a.active { border-left: 2px solid #fff; background: #15274b; } #navigation > a:not(.active):hover { border-left: 2px solid #fff; background: #15274b; transition-duration: 0.3s; opacity: 0.75; } #navigation >.navLinks { cursor: pointer; display: block; margin: 0; height: 48px; background: none; border: none; outline: none; text-align: center; } #navigation >.navLinks:hover { background: #15274b; transition-duration: 0.3s; } /* Page List */ #pageList { display: flex; flex-direction: column; min-height: 100%; width: 164px; padding: 8px 0; justify-content: center; background: #15274b; } #pageList::before { left: 188px; background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent); background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent); } #pageList::after { left: 24px; background-image: linear-gradient(to left, rgba(0,0,0,0.4), transparent); background-image: linear-gradient(to left, rgba(0,0,0,0.4), 15% transparent); } #pageList::before, #pageList::after { content: ''; pointer-events: none; position: absolute; top: 0; bottom: 0; width: 8px; opacity: 0.5; } #pageList > a { display: flex; margin: 0; padding: 28px 14px; align-items: center; text-transform: uppercase; text-decoration: none; font-size: 8pt; color: #fff; } #pageList > a >.textPL { margin-left: 8px; } #pageList > a.active { border-left: 2px solid #fff; background: #101d38; font-weight: 700; } #pageList > a:not(.active):hover { border-left: 2px solid #fff; background: #101d38; transition-duration: 0.3s; opacity: 0.75; } #pageList >.togglePL { cursor: pointer; display: block; position: absolute; top: 8px; left: 180px; height: 30px; width: 30px; background: #101d38; border: 2px solid rgba(255,255,255,0.1); border-radius: 100%; text-align: center; } #pageList.opened a{ padding: 28px 8px; }
<,DOCTYPE html> <.-- ~ Copyright (c) Summit Learning Management System (made by students. for students), 2021, --> <html lang="en-AU"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. user-scalable=no, initial-scale=1.0; maximum-scale=1;0"> <title>Welcome —: Summit —. University of Newcastle</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <.-- External Script --> <link rel="stylesheet" type="text/css" href="../CSS/setting.css"> <:-- Internal Stylesheet --> <link rel="stylesheet" type="text/css" href=";./CSS/styling.css"> <.-- Internal Stylesheet --> <link rel="shortcut icon" href="#"> <.-- Favicon --> </head> <body> <div id="wrapper"> <.-- Navigation --> <div id="navigation"> <div class="spacer"></div> <.-- Home Workspace --> <a href="#" title="Home workspace" class="active"> <svg width="22" height="22" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64.3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96.3V319.88a16.05 16:05 0 0 0-15;95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"></path> </g> </g> </svg> </a> <.-- Learning Workspace --> <a href="#" title="Learning workspace"> <svg width="22" height="22" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M356 160H188c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12zm12 52v-8c0-6.6-5.4-12-12-12H188c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12zm64.7 268h3.3c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H80c-44.2 0-80-35.8-80-80V80C0 35.8 35.8 0 80 0h344c13.3 0 24 10.7 24 24v368c0 10-6.2 18.6-14.9 22.2-3.6 16.1-4.4 45.6-.4 65.8zM128 384h288V32H128v352zm-96 16c13:4-10 30-16 48-16h16V32H80c-26;5 0-48 21.5-48 48v320zm372.3 80c-3.1-20.4-2.9-45.2 0-64H80c-64 0-64 64 0 64h324.3z"></path> </g> </g> </svg> </a> <.-- Student Management Workspace --> <a href="#" title="Student management workspace"> <svg width="22" height="22" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70:7 0 128-57;3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"></path> </g> </g> </svg> </a> <.-- Portal Workspace --> <a href="#" title="Portal workspace"> <svg width="22" height="22" viewBox="0 0 496 512"> <g style="fill. #fff."> <g> <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm193.2 152h-82.5c-9-44.4-24.1-82.2-43.2-109.1 55 18.2 100.2 57.9 125.7 109.1zM336 256c0 22.9-1.6 44.2-4.3 64H164.3c-2.7-19.8-4.3-41.1-4.3-64s1.6-44.2 4.3-64h167.4c2.7 19.8 4.3 41.1 4.3 64zM248 40c26.9 0 61.4 44.1 78.1 120H169.9C186.6 84.1 221.1 40 248 40zm-67.5 10.9c-19 26.8-34.2 64.6-43.2 109.1H54.8c25.5-51.2 70.7-90.9 125.7-109.1zM32 256c0-22.3 3.4-43.8 9.7-64h90.5c-2.6 20.5-4.2 41.8-4.2 64s1.5 43.5 4.2 64H41.7c-6.3-20.2-9.7-41.7-9.7-64zm22.8 96h82.5c9 44.4 24.1 82.2 43.2 109.1-55-18.2-100.2-57.9-125.7-109.1zM248 472c-26.9 0-61.4-44.1-78.1-120h156.2c-16.7 75.9-51.2 120-78.1 120zm67.5-10.9c19-26.8 34.2-64.6 43.2-109.1h82.5c-25.5 51.2-70.7 90.9-125.7 109.1zM363.8 320c2.6-20.5 4.2-41.8 4.2-64s-1.5-43.5-4:2-64h90;5c6.3 20.2 9.7 41.7 9.7 64s-3.4 43.8-9.7 64h-90.5z"></path> </g> </g> </svg> </a> <.-- Administration Workspace --> <a href="#" title="Administration workspace"> <svg width="22" height="22" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43:929 75;957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path> </g> </g> </svg> </a> <div class="spacer"></div> <.-- Help --> <button title="Help" class="navLinks"> <svg width="16" height="16" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77.44 107.408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119:291-96;61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path> </g> </g> </svg> </button> <.-- Quick Links --> <button title="Quick links" class="navLinks"> <svg width="16" height="16" viewBox="0 0 384 512"> <g style="fill: #fff;"> <g> <path d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm16 456.287l-160-93.333-160 93.333V48c0-8.822 7.178-16 16-16h288c8.822 0 16 7.178 16 16v408.287z"></path> </g> </g> </svg> </button> <.-- Log Out --> <button title="Log out" class="navLinks"> <svg width="16" height="16" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M160 217.1c0-8.8 7.2-16 16-16h144v-93.9c0-7.1 8.6-10.7 13.6-5.7l141.6 143.1c6.3 6.3 6.3 16.4 0 22.7L333.6 410.4c-5 5-13.6 1.5-13.6-5.7v-93.9H176c-8.8 0-16-7.2-16-16v-77.7m-32 0v77.7c0 26.5 21.5 48 48 48h112v61.9c0 35.5 43 53.5 68.2 28.3l141.7-143c18.8-18.8 18.8-49.2 0-68L356.2 78.9c-25.1-25.1-68.2-7.3-68.2 28.3v61.9H176c-26.5 0-48 21.6-48 48zM0 112v288c0 26.5 21:5 48 48 48h132c6;6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h132c6.6 0 12-5.4 12-12v-8c0-6.6-5.4-12-12-12H48C21.5 64 0 85.5 0 112z"></path> </g> </g> </svg> </button> </div> <.-- Page List --> <div id="pageList"> <.-- Summit Messages --> <a href="#" title="Summit messages"> <svg width="20" height="20" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M569.9 441.1c-.5-.4-22.6-24.2-37.9-54.9 27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9C368.4 72.5 294.3 32 208 32 93.1 32 0 103.6 0 192c0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.1 2.1 18.4 3.7 28 4.8 31.5 57.5 105.5 98 191.8 98 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25zM155.4 314l-13.2-3-11.4 7.4c-20.1 13.1-50.5 28.2-87.7 32.5 8.8-11.3 20.2-27.6 29.5-46.4L83 283.7l-16.5-16.3C50.7 251.9 32 226.2 32 192c0-70.6 79-128 176-128s176 57.4 176 128-79 128-176 128c-17.7 0-35.4-2-52.6-6zm289.8 100.4l-11.4-7.4-13.2 3.1c-17.2 4-34.9 6-52.6 6-65.1 0-122-25.9-152.4-64.3C326.9 348.6 416 278.4 416 192c0-9.5-1.3-18.7-3.3-27.7C488.1 178.8 544 228.7 544 288c0 34.2-18.7 59.9-34:5 75;4L493 379.7l10.3 20.7c9.4 18.9 20.8 35.2 29.5 46.4-37.1-4.2-67.5-19.4-87.6-32.4z"></path> </g> </g> </svg> <span class="textPL">Summit Messages</span> </a> <.-- Dashboard --> <a href="#" title="Dashboard"> <svg width="20" height="20" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M504 416H32V72c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v360c0 8.84 7.16 16 16 16h488c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM98.34 263.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l72.69-72.01 84.69 84.69c6.25 6.25 16.38 6.25 22.63 0l93.53-93.53 44.04 44.04c4.95 4.95 11.03 7.16 17 7.16 12.48 0 24.46-9.7 24.46-24.34V112.19c0-8.94-7.25-16.19-16.19-16.19H344.34c-21.64 0-32.47 26.16-17.17 41:46l44;71 44.71-82.22 82.22-84.63-84.63c-6.23-6.23-16.32-6.25-22.57-.05l-84.12 83.32zM362.96 128H448v85.04L362.96 128z"></path> </g> </g> </svg> <span class="textPL">Dashboard</span> </a> <.-- Help --> <a href="#" title="Help"> <svg width="20" height="20" viewBox="0 0 512 512"> <g style="fill. #fff."> <g> <path d="M256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm7.67-24h-16c-6.627 0-12-5.373-12-12v-.381c0-70.343 77.44-63.619 77.44-107.408 0-20.016-17.761-40.211-57.44-40.211-29.144 0-44.265 9.649-59.211 28.692-3.908 4.98-11.054 5.995-16.248 2.376l-13.134-9.15c-5.625-3.919-6.86-11.771-2.645-17.177C185.658 133.514 210.842 116 255.67 116c52.32 0 97.44 29.751 97.44 80.211 0 67.414-77.44 63.849-77:44 107;408V304c0 6.627-5.373 12-12 12zM256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8z"></path> </g> </g> </svg> <span class="textPL">Help</span> </a> <.-- Notices --> <a href="#" title="Notices"> <svg width="20" height="20" viewBox="0 0 576 512"> <g style="fill. #fff."> <g> <path d="M552 64H88c-13.234 0-24 10.767-24 24v8H24c-13.255 0-24 10.745-24 24v280c0 26.51 21.49 48 48 48h504c13.233 0 24-10.767 24-24V88c0-13.233-10.767-24-24-24zM32 400V128h32v272c0 8.822-7.178 16-16 16s-16-7.178-16-16zm512 16H93.258A47.897 47.897 0 0 0 96 400V96h448v320zm-404-96h168c6.627 0 12-5.373 12-12V140c0-6.627-5.373-12-12-12H140c-6.627 0-12 5.373-12 12v168c0 6.627 5.373 12 12 12zm20-160h128v128H160V160zm-32 212v-8c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H140c-6.627 0-12-5.373-12-12zm224 0v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6:627-5;373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-128v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 64v-8c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"></path> </g> </g> </svg> <span class="textPL">Notices</span> </a> <.-- Timetable --> <a href="#" title="Timetable"> <svg width="20" height="20" viewBox="0 0 448 512"> <g style="fill. #fff."> <g> <path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5:4-12 12-12h40c6;6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"></path> </g> </g> </svg> <span class="textPL">Timetable</span> </a> <.-- Welcome --> <a href="#" title="Welcome" class="active"> <svg width="20" height="20" viewBox="0 0 640 512"> <g style="fill. #fff."> <g> <path d="M638.9 209.7l-8-13.9c-2.2-3.8-7.1-5.1-10.9-2.9l-108 63V240c0-26.5-21.5-48-48-48H320v62.2c0 16-10.9 30.8-26.6 33.3-20 3.3-37.4-12.2-37.4-31.6v-94.3c0-13.8 7.1-26.6 18.8-33.9l33.4-20.9c11.4-7.1 24.6-10.9 38.1-10.9h103.2l118.5-67c3.8-2.2 5.2-7.1 3-10.9l-8-14c-2.2-3.8-7.1-5.2-10.9-3l-111 63h-94.7c-19.5 0-38.6 5.5-55.1 15.8l-33.5 20.9c-17.5 11-28.7 28.6-32.2 48.5l-62.5 37c-21.6 13-35.1 36.7-35.1 61.9v38.6L4 357.1c-3.8 2.2-5.2 7.1-3 10.9l8 13.9c2.2 3.8 7.1 5.2 10.9 3L160 305.3v-57.2c0-14 7.5-27.2 19.4-34.4l44.6-26.4v65.9c0 33.4 24.3 63.3 57.6 66.5 38.1 3.7 70.4-26.3 70.4-63.7v-32h112c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-24v36c0 19.8-16 35.8-35.8 35.8h-16.1v16c0 22.2-18 40.2-40.2 40.2H238.5l-115.6 67.3c-3.8 2.2-5.1 7.1-2.9 10.9l8 13.8c2.2 3.8 7.1 5.1 10.9 2.9L247.1 448h100.8c34.8 0 64-24.8 70:8-57;7 30.4-6.7 53.3-33.9 53.3-66.3v-4.7c13.6-2.3 24.6-10.6 31.8-21.7l132.2-77c3.8-2.2 5.1-7.1 2.9-10.9z"></path> </g> </g> </svg> <span class="textPL">Welcome</span> </a> <button title="Expand/collapse the page selectors [ alt + p ]" class="togglePL"> <svg width="10" height="10" viewBox="0 0 256 512"> <g style="fill. #fff."> <g> <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path> </g> </g> </svg> </button> </div> </div> <script src="../JS/setting.js" type="text/javascript"></script> <!-- Internal Script --> </body> </html>
解决方案2
0 2021-01-04 12:22:22
发生此问题是因为您在 SVG 元素中将宽度和高度指定为内联属性。 在 CSS 中，内联属性具有更高的优先级； 所以尝试删除内联 styles 它应该可以工作
使用 javascript 生成的 SVG 和嵌入的外部 SVG 作为 Google 地图图标，
[英]Using javascript-generated SVG with embedded external SVG as Google Maps icons,
Javascript：在svg中使用字体图标。 <i>How do I use “\\u”?\u003c/i> 如何使用“ \\ u”？
[英]Javascript: Using font icons in svg's. How do I use “\u”?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 vanilla javascript 动态添加 SVG 图标
使用 javascript 生成的 SVG 和嵌入的外部 SVG 作为 Google 地图图标，
结合使用SVG图标和jQuery切换
javascript中Chromium中有效的SVG大小调整
将外部 SVG 图标加载到普通 JavaScript 代码中
Javascript：在svg中使用字体图标。 <i>How do I use “\\u”?\u003c/i> 如何使用“ \\ u”？
使用 Javascript 调整图像大小
使用Javascript调整字母大小
使用 SVG 在 CSS 中制作自定义图标
使用我的 SVG 的材料图标 SvgIcon 问题
相关标签