Problemer med lenker i SVG? Løs det enkelt slik (2024)

Minopplæringenmed å lage interaktive SVG-bilder og legge det til et WordPress-nettsted har blitt populært over tid. Og leserne mine kontakter meg fra tid til annen med problemer de møter når de prøver å lage SVG-filen i Inkscape. En av de vanligste problemene gjelder å håndtereopprette og redigere lenkerfor et SVG-område eller -form. Oftest er problemene knyttet til klønete brukergrensesnitt avInkscapeprogramvare.

Jeg bestemte meg for å skrive denne artikkelen som en ressurs for å hjelpe med å løse slike problemer knyttet til å lage eller redigere lenker i SVG.

Forresten, her er en avsløring: Selv om denne artikkelen handler om SVG og ikke om hosting, har jeg noen tilknyttede lenker på denne siden til vertene som jeg anbefaler. I tilfelle du trenger en anstendig vert, foreslår jeg at du ser på vertsanbefalingene mine. Dessuten får jeg betalt hvis du klikker på mine tilknyttede lenker og foretar et kjøp. Alle slike lenker åpnes i nytt vindu/fane; ingen programvare/program vil bli installert på datamaskinen din. (Dette er et standardvarsel som kreves av hostingselskaper.) Vær oppmerksom på at selv om alle verter som er nevnt i denne artikkelen er veletablerte og anses å være veldig gode, anbefaler jeg ikke alle. Mine anbefalte verter erher.

Greit, hvert kapittel nedenfor representerer et problem med lenker i SVG og en løsning.

Jeg la til en lenke, men den er ikke synlig, går tapt eller tar hele plassen rundt

Kort oppsummert:

• Hovedårsaken til problemet erfeil rekkefølge av objekter eller former.
• Løsningen er å endre rekkefølgen på objektene enten i Inkscape, redigere SVG-koden eller gjenskape objektene eller hele SVG.

SVG med riktig fungerende link

Fremfor alt er det slik enSVG med riktig fungerende linkser ut som (og ja, jeg opprettet denne SVG for å promotere siden med listen min over anbefalte verter, så besøk den gjerne hvis du er interessert):

(Beveg musen over bildet av fotorammen for å se den fungerende SVG-en)

Og dette er den animerte GIF-en som viser at det ikke er noen problemer med lenker i SVG-bildet (hvis du er forvirret med SVG-en ovenfor av en eller annen grunn til å prøve selv):

SVG med en totalt manglende lenke

Slik ser dette problemet med fullstendig manglende kobling i SVG ut:

(Hvis du beveger musen over bildet av fotorammen, vil du ikke kunne klikke på lenken)

Her er den animerte GIF-en som demonstrerer problemet:

Løser SVG-problemet med kobling ved å flytte objekter i Inkscape

Den mest typiske årsaken til dette problemet er feil rekkefølge på objektene.
Du kan prøve å fikse rekkefølgen ved å bruke Inkscape brukergrensesnitt.

Dette er hvordanriktig rekkefølge på lenke- og formobjekteneskal se ut som i SVG i Inkscape-redigeringsprogrammet:

Og dette er hvordanfeil rekkefølge på lenke- og formobjekteri SVG ser slik ut:

I mange tilfeller kan du fikse problemet ved å bare dra formobjektet inn i lenkeobjektet. Åpne "Objekter"-panelet i Inkscape, finn objektene dine og dra dem til hverandre. Det vil gjøre formobjektet til barnet til lenkeobjektet. Koblingsobjektet skal være overordnet.

Løser SVG-problemet med lenke ved å endre SVG-koden

Noen ganger hjelper det ikke å dra objektene for å fikse problemet med manglende lenker i SVG. Det kan være forbundet med noen feil i SVG-koden. I dette tilfellet kan du prøve å løse problemet ved å redigere SVG-koden.

SVG-bilde er faktisk en XML-fil som koder. Du kan redigere koden ved å bruke et hvilket som helst vanlig tekstredigeringsprogram. Jeg foretrekker å brukeNotisblokk++(det er gratis).

Ok, åpne SVG-filen i koderedigeringsprogrammet (tekstredigering). Finn deretter de aktuelle objektene (lenkeobjektet og formobjektet). Koblingsobjektet harstikkord. Formen (bane) objektet harstikkord.

Her er hvordan koden til SVG medfungerende lenkerser ut som:

Legg merke til hvordan koden representerer foreldre-barn-forholdet. Koden til formobjektet (barnet) er inne i koden til lenkeobjektet (forelderen).

Og dette er koden til den ødelagte SVG (med lenken som ikke fungerer):

Merk at koden til form-(bane)-objektet IKKE er inne i koden til lenken. Dette er ikke OK.

Prøv å fikse koden ved å klippe ut koden til formen (banen) og lime den inn istikkord. Du bør få koden som jeg presenterte ovenforher.

Gjenopprette SVG- eller SVG-objekter

Noen ganger kan du ikke fikse lenken i SVG ved å bruke metodene ovenfor. Det kan kobles sammen med en kompleksitet av koden, og det er lett å gjøre feil hvis du ikke er en koder. I dette tilfellet kan du gjenopprette SVG-elementene eller hele SVG-filen helt ved å bruke Inkscape eller til og med manuelt ved å skrive koden.

Her er noen praktiske tips hvis enkel gjenoppretting av objektene i Inkscape ikke fungerer igjen:

• Du kan se hvordan SVG-koden endres. Med andre ord, hvilke deler av koden som vises når du legger til objektet (en bane eller en lenke). For å sammenligne endringene før og etter å legge til objektet kan du bruke et verktøy somDiffchecker. Den vil fortelle deg hvilken spesifikk kode som er ansvarlig for formen og lenken din.
• Når du kjenner koden for formen (stien) og lenken din, kan du legge banens kode i lenkens kode (dvs. inne itag) manuelt hvis du ikke klarer å gjøre det via Inkscape.
• Åpne SVG-filen i et enkelt nettleservindu/-fane for å sjekke hvordan ti fungerer (dvs. du trenger ikke legge til SVG-bildet på nettstedet ditt for å sjekke hvordan det fungerer).

Det siste tipset i denne delen: kanskje problemet ikke handler om den tapte lenken. Kanskje du rotet til med fill-egenskapen (den tynne kanten av lenkeobjektet skal være klikkbar i dette tilfellet). Seneste avsnittfor detaljene.

Dessuten, hvis du tross alt blir forvirret, kan du prøve å gjenskape SVG helt. Noen ganger er det en raskere og enklere måte (spesielt hvis SVG-en ikke er komplisert). Når du gjenoppretter SVG-en din, start fra den problematiske delen (dvs. der koblingen din ikke ble lagt til på riktig måte) bare for å se om det fungerer denne gangen.

SVG med lenken utenfor planområdet

Her er hvordan dette problemet med lenken visesutenfor planområdeti SVG ser slik ut:

(Beveg musen over bildet av fotorammen for å se den fungerende SVG-en)

(Det planlagte området er ikke klikkbart, men uteområdet er klikkbart)

Her er den animerte GIF-en som demonstrerer problemet:

Løser SVG-problemet med kobling ved å flytte objekter i Inkscape

Den mest typiske årsaken til dette problemet er feil rekkefølge på objektene.
Du kan prøve å fikse rekkefølgen ved å bruke Inkscape brukergrensesnitt.

Dette er hvordanriktig rekkefølge på lenke- og formobjekteneskal se ut som i SVG i Inkscape-redigeringsprogrammet:

Og dette er hvordanfeil rekkefølge på lenke- og formobjekteri SVG ser slik ut:

Det er sannsynlig at du kan fikse problemet med koblingen som vises utenfor det planlagte området ved å bare dra objektene i "Objekt"-panelet inne i Inkscape.

Løser SVG-problemet med lenke ved å endre SVG-koden

Hvis du av en eller annen grunn ikke kunne løse problemet i Inscape, kan du prøve å fikse koden ved å redigere den i et tekst-/koderedigeringsprogram som Notepad++.

Åpne SVG-filen i koderedigeringsprogrammet. Finn deretter de aktuelle objektene (lenkeobjektet og formobjektet). Koblingsobjektet harstikkord. Formen (bane) objektet harstikkord.

Her er hvordan koden til SVG medfungerende lenkerser ut som:

Legg merke til hvordan koden representerer foreldre-barn-forholdet. Koden til formobjektet (barnet) er inne i koden til lenkeobjektet (forelderen).

Og dette er koden til den ødelagte SVG (med lenken som ikke vises på det planlagte området, men som vises utenfor det planlagte området):

Merk at koden til form-(bane)-objektet IKKE er inne i koden til lenken. Dette er ikke OK.
Forresten, ikke bekymre deg for at koden til det innebygde bildet ikke er lesbar. Det er en importert punktgrafikk. Uansett, du kan se strukturen til koden og redigere (klipp-lim inn) koden du trenger.

Prøv å fikse koden ved å klippe ut koden til formen (banen) og lime den inn itaggen slik at den erstatterkode. Ogbør gå derkode var. Du bør få koden som jeg presenterte ovenforher.

Gjenopprette SVG- eller SVG-objekter

Hvis redigering inne i Inkscape eller manuell redigering av SVG-koden ikke hjelper til med å fikse koblingsproblemet, kan du slette objektene i Inkscape og gjenopprette dem. Eller du kan gjenopprette hele SVG-en hvis du går deg vill. Du kan også følge tipsene idenne seksjonenhvis du vil grave dypere (for eksempel hvis bare å gjenskape SVG ikke hjelper og du vil spore hvor problemet med lenken dukker opp).

Jeg la til en lenke, men den er ikke klikkbar, eller bare en kant av lenkeobjektet er klikkbar

Kort oppsummert:

• Hovedårsaken til problemet er detformområdet (bane) har ikke en fyllegenskap angitt.
• Løsningen er å spesifisere fill-egenskapen til form-(bane)-objektet. Det vil få koblingsobjektet til å fungere som forventet.

Eksempel på SVG med lenken som bare fungerer på en tynn kant

Dette er hvordan enSVG med riktig fungerende linkser ut som:

(Flytt musen over selve kanten av bildet av fotorammen)

Den animerte GIF-en nedenfor demonstrerer problemet med lenken i SVG-bildet:

Grensen er klikkbar faktisk bare fordislagmalinger spesifisert. Hvis enslagmalingikke er spesifisert, vil kantlinjen heller ikke være klikkbar.

Løser SVG-problemet med kobling som bare fungerer på en tynn kant

Løser problemet i Inkscape

Hvis du har dette problemet når bare en kantlinje er klikkbar, må du spesifisere "fyll"-egenskapen til formområdet:

1. Pass på at du har valgt formobjektet (ikke lenkeobjektet) som du ønsker skal være klikkbart:

   

   "Objekter"-panel / Velg formobjektet i Inkscape

2. Gå til "Fyll og strek"-panelet og spesifiser "Fyll"-egenskapen:

   

   "Fyll og stryk"-panelet i Inkscape

3. Angi hvilken som helst farge i Fill-egenskapen, lagre SVG-en og åpne i nettleseren din for å sjekke om hele formområdet ble klikkbart:

   

   Innstilling av "Fyll"-egenskapen i Inkscape

4. Etter at du har sjekket at formområdet blir klikkbart som forventet (problem løst!), kan du gå tilbake for å fortsette å jobbe med SVG-en og justere gjennomsiktigheten og interaktiviteten til formobjektet som jeg viser i veiledningen minher.

Løser problemet ved å redigere SVG-koden

I stedet for å redigere SVG i Inkscape, kan du redigere koden direkte i stedet. Jeg tror redigering i Inskcape er enklere, men uansett, slik ser det ut når du redigerer koden:

Kan ikke redigere objektattributter (ikke noe slikt panel i Inkscape, kan ikke legge til target=“_blank” osv.)

Kort oppsummert:

• Hovedårsaken til problemet er det"Objektattributter"-panelet går tapt.
• Jeg kunne ikke finne måten å åpne dette panelet i stedet for å opprette et nytt lenkeobjekt.
• Et annet alternativ er å redigere attributter i XML Editor-panelet.
• Et annet alternativ er å redigere SVG-koden direkte

Inkscape har et lite brukervennlig grensesnitt. Og noen ganger forårsaker det irriterende problemer.

Du har for eksempel lagt til en lenke. Og så vil du endre "mål"-egenskap (f.eks.target="_blank"). Men du kan ikke finne "Objektattributter"-panelet. Det er "objektegenskaper-panel", men det er ikke noe "Objektattributter"-panel. Det er veldig irriterende.

Her er de aktuelle Inkscape-panelene:

Få "Objektattributter"-panelet ved å legge til et dummy-lenkeobjekt

Trikset er enkelt:

1. Du legger til et nytt lenkeobjekt (du kan også legge til en dummy-form for det, for eksempel et rektangel, høyreklikk deretter på den aktive figuren og velg "Opprett en lenke").
2. Dette åpner panelet "objektattributter".
3. Deretter velger du lenkeobjektet du må redigere (via "objektpanelet" i Inkscape) og så er det nå - "objektattributter"-panelet er nå tilgjengelig for lenkeobjektet ditt!
4. Du kan fjerne dummy-lenkeobjektet (og dummy-formobjektet).

Poenget er at "objektattributter"-panelet åpnes bare når du oppretter en kobling. Men så, etter at du lukker panelet eller Inkscape, forsvinner panelet. Og du kan ikke åpne den igjen. Ved å lage et dummy-lenkeobjekt kan du få tilgang til panelet igjen som viser attributtene til lenkeobjektet som er valgt for øyeblikket.

Redigere objektattributter i XML Editor-panelet i Inkscape

SVG-bilde er en XML-tekstfil. Og Inkscape har en innebygd XML-editor. Du kan åpne den ved å navigere gjennom panelene i Inkscape eller ganske enkelt trykkeShift + Ctrl + O.

En litt vanskelig ting er at du trenger å vite IDen til lenkeobjektet du vil redigere. Velg det i XML Editor (se skjermbildet ovenfor). Og du må vite navnet på attributtet du vil legge til eller redigere. Det er ikke komplisert.

Redigere objektattributter i koden til SVG-filen

Selv om du ikke er veldig komfortabel med å redigere kode, kan det være den enkleste og raskeste måten å gjøre det du vil. Bare åpne SVG-bildet ditt i et vanlig tekstredigeringsprogram eller et koderedigeringsprogram (f.eks. Notepad++), finn koblingsobjektet ditt (du trenger ID-en til objektet) og legg til en linje som spesifiserer koblingsattributtet du trenger, eller rediger en du vil ha.

Ulik lenkeoppførsel i forskjellige nettlesere som jobber med SVG

Dette er en sak som jeg og min leser har løst. Og jeg vil gjerne dele resultatene av funnene våre.

Problemet var at på forskjellige enheter (f.eks. iPhone) forårsaket koblingen forskjellige handlinger. På noen enheter åpnet en ny fane eller et nytt vindu, på andre enheter fulgte den bare lenken på samme side. Min leser bestemte seg for å bruke javascript for å åpne et nytt vindu. Men det løste ikke problemet og kompliserte bare tingene.

Løsningen var enkel. Bare å leke med«mål»-attributtav en lenke løste problemet.target="_top"var vinnerverdien som elegant løste alle problemene.

Hvis du opplever lignende problemer, prøv å leke med forskjellige verdier for "target"-attributtet også.

Problemer med SVG-koblinger ved bruk av Elementor-plugin

Jeg har flere forespørsler i kommentarene tildenne artikkelenog via private meldinger om problemene med koblingene i SVG-bilde ved bruk av Elementor-plugin (både gratis og betalte versjoner).

Her er problemene og løsningene:

• Det vanligste problemet er at lenkene i SVG rett og slett ikke fungerer. SVG behandles som et vanlig bilde.Løsning:Last opp SVG-filen via WordPress mediebibliotek, ikke via Elementor. Og brukHTML-widget, ikkeWP Custom HTML-widget.
• Et annet vanlig problem er at koblingen ikke åpner en ny side (f.eks. viser den et ødelagt bildeikon).Løsning:deaktiver Image Light Box i Elementors Innstilling > Style-fanen > Image Light Box (helt nederst) og fjern merket i boksen.
• Følgende problem gjelder caching. Som med vanlige bilder, hvis du først sletter SVG-filen fra WP-biblioteket og deretter laster opp den nye versjonen av SVG med samme navn, kan den gamle versjonen av SVG-bildet bli bufret.Løsning:bruk et nytt navn for SVG-filen hver gang du laster opp en ny versjon.

Dessuten, hvis du har problemer med at SVG jobber i Elementor, foreslår jeg at du går tildenne siden, søk (Ctrl+F) etter "Elementor" i kommentarfeltet og studer de tilsvarende trådene. Det er sjanser for at du vil løse problemene etter å ha lest disse kommentarene.

Jeg gjorde alt som instruert, men jeg har fortsatt et problem med SVG (f.eks. lenker fungerer ikke)

Noen ganger føler du deg fortapt når du gjorde alt riktig og fortsatt ikke SVG fungerer som forventet. Selv om SVG er en ganske solid og moderne teknologi, kan du i kombinasjon med forskjellig WordPress-programvare (spesielt sidebyggere) støte på noen problemer som prøver å få SVG til å fungere på nettstedet ditt.

Det kan være forskjellige isolerte tilfeller som jeg ikke kan dekke i denne opplæringen, og jeg kan ikke forestille meg hva som kan gå galt. En standard tilnærming til en slik situasjon er følgende:

1. Du sørger for at SVG-en din gjøres riktig. Åpne SVG-bildet ditt separat i en nettleser. Hvis det ikke fungerer, har du gjort noe galt når du opprettet SVG. Jeg foreslår å lese minopplæringenen gang til. Hvis SVG fungerer i et eget nettleservindu/fane, er ikke problemet i SVG, men det er en viss konflikt mellom SVG og WordPress eller WordPress-programvare (plugins, temaer osv.).
2. Deretter kan du prøve å deaktivere alle pluginene dine (unntatt SVG Support plugin) og aktivere dem på nytt for å se om problemet forsvinner. Noen ganger hjelper det.
3. Da foreslår jeg at du prøver å finne ut hva som forårsaker problemet ditt. Det kan være en plugin eller et tema. Når du vet årsaken, vil du forstå hvilken avgjørelse du skal ta om det (f.eks. kontakt en plugin-/temautvikler angående konflikten med SVG eller SVG Support-plugin). En standard tilnærming er å deaktivere pluginene dine bortsett fra SVG Support plugin og deretter aktivere pluginene en etter en for å begrense de(n) motstridende plugin(ene). Les ogsådenne kommentaren.

En annen grunn til at SVG-koblinger (samt noen annen SVG-funksjonalitet) kanskje ikke fungerer, erNettserverinnstillinger.
Hvis SVG-en din fungerer perfekt lokalt (på datamaskinen din), men den ikke fungerer etter nedlasting til en webserver og NÅR du åpner i en nettleser (ren HTML eller bare åpner filen, dvs. ingen WordPress eller annen programvare), så kontakt verten din . Noe på serveren blokkerer SVG eller noe av funksjonaliteten. Jeg foreslår at du kontakter verten din da.

Konklusjon

Jeg vil at denne artikkelen skal være en hjelpende hånd for å hjelpe deg med å løse problemene med koblingene i SVG-filen din. Jeg har allerede dekket her de vanligste problemene som en rekke av leserne mine kom over ved å jobbe med lenker i SVG. Hvis du har andre problemer å legge til - gi meg gjerne beskjed i kommentarene nedenfor, innenprivat e-posteller i vårFacebook-gruppe.

Du kan laste ned en PDF-versjon av denne artikkelen (1,6 MB):