How to fix svg frames so that the text is inside a rect The frames are now under the text.

.menu-item { padding: 0 25px 0 25px; font-family: monospace; width: 200px; height: 70px; } .menu-item svg { position: relative; top: 0; left: 0; width: 200px; height: 70px; } .menu-item svg rect{ fill: transparent; stroke: black; stroke-width: 5px; stroke-dasharray: 200px 70px 200px 70px; width: 100%; height: 100%; transition: .9s all; } @keyframes menuanim { } .wrapper { display: flex; justify-content: center; margin-top:20%; } .title { width: 43ch; color:black; font-family: monospace; font-size: 40px; white-space: nowrap; overflow: hidden; border-right: 4px solid orange; animation: flashing-border 0.75s step-end infinite, printed-text 7s steps(43); } @keyframes flashing-border { 0% { border-color: orange; } 50% { border-color: transparent; } 100% { border-color: orange; } } @keyframes printed-text { from { width: 0; } } .wrapper1{ width: 200px; margin: 50px auto; } .btn{ display: block; width: 100%; height: 70px; line-height: 70px; text-decoration: none; color: black; font-family: Arial; text-transform: uppercase; font-size: 28px; letter-spacing: 3px; position: relative; text-align: center; } .wrapper1 svg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrapper1 svg rect{ fill: transparent; stroke: white; stroke-width: 5px; stroke-dasharray: 10px 180px 20px 50px 20px 180px 20px 50px; width: 100%; height: 100%; transition: .9s all; } .btn:hover rect{ stroke-dasharray: 200px 0 70px 0 200px 0 70px 0; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Веб-студия BondWeb</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid" style="padding-top:30px;"> <div class="navbar-header"> <div style="background:black;border-radius:100px;width:100px;height:100px;" class="text-center justify-center"> <a class="navbar-brand" style="font-size:50px;font-family:monospace;color:black;padding-left:10px;padding-top:10px;"> BW </a> </div> </div> <div class="menu" style="display:inline-block;padding-right:20px;"> <ul> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item">Услуги <svg> <rect></rect> </svg> </li> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item">Стоимость <svg> <rect></rect> </svg> </li> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item">Контакты <svg> <rect></rect> </svg> </li> </ul> </div> </div> </nav> <div class="wrapper"> <h1 class="title">Текст - текст текст текст текст текст текст</h1> </div> <div class="wrapper1"> <a href="" class="btn">Заказать <svg> <rect></rect> </svg> </a> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> </body> </html>

  • Why are there SVGs at all? border than not pleased? - DaemonHK
  • it is better to place the text inside svg, if you like it svg framework - Stranger in the Q
  • @DaemonHK will continue to do the animation, and svg is more pleasant - Alexander
  • @StrangerintheQ disappears when placed in svg, how can I fix it? - Alexander
  • @Alexander is another question, it's just that it’s a little differently arranged there - Stranger in the Q

1 answer 1

This is how you can insert text directly into svg

 <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Стоимость</text>

x="50%" y="50%" set the anchor point

text-anchor="middle" dominant-baseline="middle" align it to the center relative to the anchor point

Here is your code snippet, with my changes.

 .menu-item { padding: 0 25px 0 25px; font-family: monospace; width: 200px; height: 70px; } .menu-item svg { position: relative; top: 0; left: 0; width: 200px; height: 70px; } .menu-item svg rect{ fill: transparent; stroke: black; stroke-width: 5px; stroke-dasharray: 200px 70px 200px 70px; width: 100%; height: 100%; transition: .9s all; } @keyframes menuanim { } .wrapper { display: flex; justify-content: center; margin-top:20%; } .title { width: 43ch; color:black; font-family: monospace; font-size: 40px; white-space: nowrap; overflow: hidden; border-right: 4px solid orange; animation: flashing-border 0.75s step-end infinite, printed-text 7s steps(43); } @keyframes flashing-border { 0% { border-color: orange; } 50% { border-color: transparent; } 100% { border-color: orange; } } @keyframes printed-text { from { width: 0; } } .wrapper1{ width: 200px; margin: 50px auto; } .btn{ display: block; width: 100%; height: 70px; line-height: 70px; text-decoration: none; color: black; font-family: Arial; text-transform: uppercase; font-size: 28px; letter-spacing: 3px; position: relative; text-align: center; } .wrapper1 svg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrapper1 svg rect{ fill: transparent; stroke: white; stroke-width: 5px; stroke-dasharray: 10px 180px 20px 50px 20px 180px 20px 50px; width: 100%; height: 100%; transition: .9s all; } .btn:hover rect{ stroke-dasharray: 200px 0 70px 0 200px 0 70px 0; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Веб-студия BondWeb</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid" style="padding-top:30px;"> <div class="navbar-header"> <div style="background:black;border-radius:100px;width:100px;height:100px;" class="text-center justify-center"> <a class="navbar-brand" style="font-size:50px;font-family:monospace;color:black;padding-left:10px;padding-top:10px;"> BW </a> </div> </div> <div class="menu" style="display:inline-block;padding-right:20px;"> <ul> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item"> <svg> <text fill="rgba(123,123,11,0.7)" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Услуги</text> <rect></rect> </svg> </li> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item"> <svg> <text stroke="red" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Стоимость</text> <rect></rect> </svg> </li> <li style="display:inline-block;color:black;font-size:25px;" class="menu-item"> <svg> <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Контакты</text> <rect></rect> </svg> </li> </ul> </div> </div> </nav> <div class="wrapper"> <h1 class="title">Текст - текст текст текст текст текст текст</h1> </div> <div class="wrapper1"> <a href="" class="btn">Заказать <svg> <rect></rect> </svg> </a> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> </body> </html>

  • How can I change the color of the text? normal color: white; does not work - Alexander
  • one
    @Alexander in svg 2 shape color attribute, for stroke stroke and for fill fill, I changed the answer - Stranger in the Q