How do I make SVG created shapes responsive to any screen size?
Question
I have coded 2 circles that appear on the corners of a screen with a '+' in the middle. However, as I change screens, the circles and '+' don't modify to fit the dimensions of a new screen
I've looked at questions that've been asked here before in regards to this topic, and this is what I have found helpful. Yet, the objects inside the svg are still not responsive to a change in screen size
<html style="width:100%;height:100%;">
<body style="width:100%;height:100%;margin:20;">
<svg width="1380" height="820">
.fade-out { animation: hide 3s ease-in forwards; } @keyframes hide { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } }
<!DOCTYPE html> <html style="width:100%;height:100%;"> <body style="width:100%;height:100%;margin:20;"> <!-- defines dimensions of svg screen--> <svg width="100vw" height="100vh" > <!-- creates greyscale gradient and attached it to dot 2 (top right)--> <defs> <linearGradient id="dot2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:grey;stop-opacity:0.5" /> <stop offset="100%" style="stop-color:black;stop-opacity:0.9" /> </linearGradient> <filter id="shadow"> <feDropShadow dx="0.9" dy="0.9" stdDeviation="0.4"/> </filter> </defs> <circle cx="1350" cy="40" r="25" fill="url(#dot2)" filter="url(#shadow)" class="fade-out" /> <!-- creates greyscale gradient and attaches it to dot 3 (bottom left)--> <defs> <linearGradient id="dot3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:grey;stop-opacity:0.5" /> <stop offset="100%" style="stop-color:black;stop-opacity:0.9" /> </linearGradient> <filter id="shadow"> <feDropShadow dx="0.9" dy="0.9" stdDeviation="0.4"/> </filter> </defs> <circle cx="40" cy="780" r="25" fill="url(#dot3)" filter="url(#shadow)" class="fade-out" /> <text x="670" y="440" style="fill:grey;stroke:black;opacity:0.9" font-size="100">+</text> </svg> </body> </html>
1 answers
solution1
0 ACCPTED 2019-07-15 21:04:48
Instead of using direct pixel sizes such as 1380, do relative sizes like 100vw and 100vh. Such as:
<svg width="100vw" height="100vh">
this will make it 100% of the view port width and 100% of the view port height
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.