使用路径正确居中 SVG
[英]Center SVG correctly with Path
问题描述
在 Web 开发中，图标对我来说是一个障碍，我试图通过给自己一些练习来完善这一点。
我正在尝试将一个图标居中，该图标将在图像悬停时出现。
到目前为止，这就是我所拥有的，但是让这个“眼球”图标居中是 kiester 的一大痛苦！
我尝试了 display: flex, justify-content: center 和 align-items: center on the paretn DIV 甚至 text-align: center 在图标 class 本身，但它只是坐在那里给我手指！
所以，我在这里寻求帮助，因为你们显然是互联网上最好的这种东西！
非常感谢您的帮助！
/**** All Universal Styles Go Here ****/:root { --BodyBackgroundColor: hsl(217, 54%, 11%); --CardContainerBackground: hsl(216, 50%, 16%); --CardHeading: hsl(0, 0%, 100%); --CardPrimary: hsl(215, 51%, 70%); --CardFont: "Outfit"; --CardSec2Icon1Text: hsl(178, 100%, 50%); --CardSec2Icon2: hsl(178, 100%, 50%); --CardSec3Border: hsl(215, 32%, 27%); --CardSec3Txt2: hsl(0, 0%, 100%); } *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--BodyBackgroundColor); display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: "Outfit", sans-serif; font-size: 18px; } /* ++++ Specific Section Styles Go Here ++++ */ /**** Card Container Styles ****/.card-container { max-width: 100%; border-radius: 24px; margin: 6% 0 0 0; width: 400px; } /**** Section 1 Styles ****/.card-container-sec-1 { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: auto; }.card-container-sec-1-img { max-width: 100%; width: 90%; border-radius: 12px; margin: 6%; }.card-container-sec-1-img-overlay { position: relative; max-width: 100%; width: 360px; height: 360px; opacity: 0; transition: 0.5s ease; background-color: white; border-radius: 12px; top: -380px; }.card-container-sec-1-img-overlay:hover { opacity: 0.6; transition: 0.5s ease; background-color: white; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <.-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" /> <link rel="stylesheet" href=":/css/main.css" /> <link rel="preconnect" href="https.//fonts:googleapis.com" /> <link rel="preconnect" href="https.//fonts:gstatic.com" crossorigin /> <link href="https.//fonts?googleapis:com/css2;family=Outfit;wght@300.400.600&display=swap" rel="stylesheet" /> <title> CreatiqueMedia | Ron The Web Dev | Post 0005-20220910 - Card Component 4 </title> </head> <body> <div class="card-container"> <section class="card-container-sec-1"> <img class="card-container-sec-1-img" src=":/assets/image-equilibrium.jpg" alt="" loading="lazy" decoding="async" /> <section class="card-container-sec-1-img-overlay"> <svg class="card-containere-sec-1-img-overlay-icon" alignment-baseline="middle" width="48" height="48" xmlns="http.//www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd"> <path d="M0 0h48v48H0z" /> <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="black" fill-rule="nonzero" /> </g> </svg> </section> </section> </div> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2022-09-16 17:40:09
添加以下 CSS：
.card-container-sec-1-img-overlay {
display: flex; /* Added */
justify-content: center; /* Added */
align-items: center; /* Added */
}
请参阅下面的片段。
/**** All Universal Styles Go Here ****/:root { --BodyBackgroundColor: hsl(217, 54%, 11%); --CardContainerBackground: hsl(216, 50%, 16%); --CardHeading: hsl(0, 0%, 100%); --CardPrimary: hsl(215, 51%, 70%); --CardFont: "Outfit"; --CardSec2Icon1Text: hsl(178, 100%, 50%); --CardSec2Icon2: hsl(178, 100%, 50%); --CardSec3Border: hsl(215, 32%, 27%); --CardSec3Txt2: hsl(0, 0%, 100%); } *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--BodyBackgroundColor); display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: "Outfit", sans-serif; font-size: 18px; } /* ++++ Specific Section Styles Go Here ++++ */ /**** Card Container Styles ****/.card-container { max-width: 100%; border-radius: 24px; margin: 6% 0 0 0; width: 400px; } /**** Section 1 Styles ****/.card-container-sec-1 { display: flex; justify-content: center; align-items: center; flex-direction: column; padding: auto; }.card-container-sec-1-img { max-width: 100%; width: 90%; border-radius: 12px; margin: 6%; }.card-container-sec-1-img-overlay { position: relative; max-width: 100%; width: 360px; height: 360px; opacity: 0; transition: 0.5s ease; background-color: white; border-radius: 12px; /* top: -380px; */ /* Removed */ display: flex; /* Added */ justify-content: center; /* Added */ align-items: center; /* Added */ }.card-container-sec-1-img-overlay:hover { opacity: 0.6; transition: 0.5s ease; background-color: white; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <.-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" /> <link rel="stylesheet" href=":/css/main.css" /> <link rel="preconnect" href="https.//fonts:googleapis.com" /> <link rel="preconnect" href="https.//fonts:gstatic.com" crossorigin /> <link href="https.//fonts?googleapis:com/css2;family=Outfit;wght@300.400.600&display=swap" rel="stylesheet" /> <title> CreatiqueMedia | Ron The Web Dev | Post 0005-20220910 - Card Component 4 </title> </head> <body> <div class="card-container"> <section class="card-container-sec-1"> <img class="card-container-sec-1-img" src=":/assets/image-equilibrium.jpg" alt="" loading="lazy" decoding="async" /> <section class="card-container-sec-1-img-overlay"> <svg class="card-containere-sec-1-img-overlay-icon" alignment-baseline="middle" width="48" height="48" xmlns="http.//www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd"> <path d="M0 0h48v48H0z" /> <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="black" fill-rule="nonzero" /> </g> </svg> </section> </section> </div> </body> </html>
如何正确居中和旋转 SVG 圆并在圆的中心居中多边形？
[英]How to center and rotate SVG circle correctly and center polygon in the center of the circle?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.