Resizing SVG icons and text together responsively
Question
I have an SVG icon with text inside. I put these two using the position on 4 photos in the middle of the page, the problem is that the icon does not change with the change of page size and the text comes out of it. Using media query for mobile, tablet, and desktop sizes, it shows correctly, but between the sizes of these 3, it does not work well because the transform command is unitless and does not change the size optimally by changing the screen size. The photos in the background are also of the grid type. What do you suggest to change the correct size?
My project on GitHub here
```.grid { display: grid; position: relative; }.icon--art { width: 200px; }.icon--wavy-edges-circle { filter: drop-shadow(0 0 0 #f3ede9); opacity: 0.95; position: absolute; left: 50%; right: 50%; transform: translate(-50%, 50%); }.art__img-text { font-size: 2.4rem; letter-spacing: 2px; line-height: 3.6rem; color: #c9b176; font-weight: 400; font-family: Alegreya, "Times New Roman", Times, serif; text-align: center; position: absolute; inset: 36% auto; transform: translate(0%, 18%); padding: 0 9rem; } ```
``` <section class="container art__block"> <article class="grid grid--1×2"> <div class="art__content"> somethings... </div> <div class="art__gallery grid grid--2×2"> <img src="..." alt="..." /> <img src="..." alt="..." /> <img src="..." alt="..." /> <img src="..." alt="..." /> <div class="circle"> <svg class="icon--art icon--wavy-edges-circle"> <use href="images/sprite.svg#wavyEdgesCircle"></use> <span class="art__img-text">TASTES SO GOOD!</span> </svg> </div> </div> </article> </section> ```
2 answers
solution1
3 2022-04-13 12:33:46
<span> is not a valid <svg> element. Text should be in a <text> element. Because of that, the browser will be trying create a sensible document by terminating the <svg> at the span element. Your actual document will;look like the following:
...
<div class="circle">
<svg class="icon--art icon--wavy-edges-circle">
<use href="images/sprite.svg#wavyEdgesCircle"></use>
</svg>
<span class="art__img-text">TASTES SO GOOD!</span>
</svg> <!-- (ignored) -->
</div>
This may be all or part of your problem. It's hard to tell without a proper working example with actual images that we can resize and test.
solution2
0 2022-04-14 18:03:31
I solved the problem, the SVG format was not suitable for what I wanted to do and I used the jpg format instead and then used the Vh, Vw unit for the font size as well as the width and height, the text is always inside the image. Takes even changing the page size.
html { font-size: 62.5%; }.container { border: 1px solid darkblue; width: 15vw; height: 20vh; position: relative; padding: 1vh; }.container p { font-size: 3vh; color: rgb(71, 49, 49); text-align: center; position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%); background: white; }.container img { width: 15vw; height: 20vh; }
<body> <div class="container"> <img src="https://s6.uupload.ir/files/circle-wave_pycn.jpeg" alt="" /> <p>TASTES SO GOOD!</p> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.