Hur man gör SVG-bildkod responsiv

digitateam





För ett bildformat som har oändlig skalbarhet kan SVG vara ett förvånansvärt svårt format att göra responsivt: vektorbilder anpassar sig inte till storleken på visningsporten som standard.


 

Gör en responsiv SVG-bild


 

Som en bildkan du göra en SVG vektorillustrationsskala med sidinnehållet som du skulle göra med alla andra:

Monkey face

Även om detta fungerar i många fall, räcker det ibland inte, särskilt om du försöker bädda in SVG-illustrationen genom att ange koden direkt på sidan. I så fall fungerar det inte att helt enkelt ändra bredden och höjden på elementet.


 

Göra Inline SVG Responsive


 

Efter att ha klistrats in i i ett HTML-dokument kommer inbäddad SVG-kod vanligtvis att se ut ungefär så här:

Med -rotelementet rensat är koden mycket mer presentabel:

Att ta bort de flesta av de redundanta elementattributen gör illustrationen responsiv, men till priset av att lägga till utrymme ovanför och under vektorbilden i vissa webbläsare (i synnerhet IE). Du kan anta att det återstående viewBox-attributet är boven, men det är det inte: låt det vara. Vi måste ta ytterligare tre steg för att integrera det responsiva SVG-elementet med vårt sidinnehåll för att få det att fungera i alla webbläsare.

Omge först SVG-koden med en

och lägg till ett preserveAspectRatio-attribut och en klass till -rotelementet:

Det flyttar SVG-illustrationen till toppen av dess displaybehållare.

.svg-container { display: inline-block; position: relativ; bredd: 100%; stoppning-botten: 100%; vertikal-align: mitten; overflow: gömd; }

Observera att bredden som används i CSS förutsätter att du vill att SVG-bilden ska vara hela sidans bredd (eller åtminstone dess överordnade behållare). Mängden vaddering-botten representerar ett förhållande mellan SVG-illustrationens höjd och bredd. Att dividera höjden på dokumentets viewBox med dess bredd ger ett förhållande på 1:1 i det här fallet, vilket innebär att padding-bottom bör ställas in på 100 %. Om SVG-bilden var bredare än den var hög, säg 1:2, skulle utfyllnadsbotten vara inställd på 50 % .


Slutligen, placera SVG inuti behållaren med lite mer CSS:

.svg-content { display: inline-block; position: absolut; topp: 0; vänster: 0; }

Detta ger en lösning där SVG-illustrationen kan skala elegant på sidan utan att störa annat innehåll; samma kod kommer att fungera på en -tagg som används för att bädda in vektorritningen:

Observera att allt innehåll i SVG kommer att skalas när det är responsivt, inklusive text.


relaterade inlägg

Hur man skapar en logotyp SVG-animering med endast CSS

Webbanimationer är en fröjd. De förbättrar användarupplevelsen genom att ge visuell feedback, vägledande uppgifter och vitalisera en webbplats. Webbanimationer kan skapas på flera sätt, inklusive JavaScript-bibliotek,…

Användbara handledningar om SVG och CSS3-animering

Användbara handledningar om SVG och CSS3-animering

Det finns inte bara ett sätt att göra SVG- och CSS3-animationer. Animation är ett sådant område som har varit ganska komplicerat tills nyligen. Idag ska vi titta på några tutorials…

















projekt

Bokning gratis bokningsmotor

Pizzerialeverans i Palma de Mallorca, Mamma Teresa

































Vi använder våra egna och tredje parts cookies för att förbättra våra tjänster, sammanställa statistisk information och analysera dina surfvanor. Detta gör att vi kan anpassa innehållet vi erbjuder och visa dig annonser som är relaterade till dina preferenser. Genom att klicka på “Acceptera alla” godkänner du lagringen av cookies på din enhet för att förbättra webbplatsnavigering, analysera trafik och hjälpa våra marknadsföringsaktiviteter. Du kan också välja “Endast systemcookies” för att endast acceptera de cookies som krävs för att webbplatsen ska fungera, eller så kan du välja de cookies du vill aktivera genom att klicka på “inställningar”.

Acceptera alla Endast systemcookies Konfiguration

Alltid aktiv

Strikt nödvändiga cookies

Dessa cookies är nödvändiga för att webbplatsen ska fungera och kan inte inaktiveras i våra system. De ställs i allmänhet bara in som svar på dina handlingar när du begär tjänster, som att ställa in dina integritetsinställningar, logga in eller fylla i formulär. Du kan ställa in din webbläsare för att blockera eller varna dig för dessa cookies, men vissa delar av webbplatsen kommer inte att fungera. Dessa cookies lagrar ingen personligt identifierbar information
















Click to rate this post!
[Total: 0 Average: 0]
Next Post

Electric Capital säkrar 1 miljard dollar för att investera i kryptoprojekt i tidiga skeden

Blockchain-riskföretaget Electric Capital har samlat in 1 miljard dollar för att stödja startups i sådd och tidigt skede inom kryptoindustrin. Electric samlar in 1 miljard dollar för att investera i kryptostartuper Enligt en tisdagsrapport från Forbes omfattar den senaste kapitalanskaffningen en aktiefond på 400 miljoner dollar som stängdes förra året […]

Subscribe US Now