如何使SVG創建的形狀響應任何屏幕尺寸？
[英]How do I make SVG created shapes responsive to any screen size?
問題描述
我編碼了兩個出現在屏幕角上的圓圈，中間帶有一個“ +”號。 但是，當我更換屏幕時，圓圈和'+'不會修改以適應新屏幕的尺寸
我已經看過有關此主題的問題，這對我有所幫助。 但是，svg內部的對象仍然無法響應屏幕尺寸的變化
<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 個解決方案
解決方案1
0 已采納 2019-07-15 21:04:48
而不是使用直接像素大小（例如1380），而是使用相對大小（例如100vw和100vh）。 如：
<svg width="100vw" height="100vh">
這將使其成為視口寬度的100％和視口高度的100％
如何根據 Angular/Ionic 中的屏幕尺寸使 CSS/HTML 邊距響應
[英]How do I make CSS/HTML margins responsive based on screen size in Angular/Ionic
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.