Nytt svg-problem

[GamEpaL]

Takket være mange her på diskusjon.no så har jeg lært ganske mye om svg og andre ting, men har et ny utfordring.

 

Dere kan se på linken;

 

http://www.icipher.net/linjeindex.html

 

I den største firkanten skal sette inn et bilde som fyller firkanten.

 

Er det noen som kan hjelpe meg med det?

 

Koden er på denne linken;

http://www.icipher.net/svgkode.html

Endret 6. februar 2015 av GamEpaL

[GamEpaL]

Jeg har et lite problem med svg. Som dere sikkert skjønner så kan jeg ikke mye.

 

Problemet er når jeg kjører linken under så vises den røde boksen.

 

http://www.icipher.net/testing/line1.svg

 

Men når jeg kjører html-fila med <img style="height: 100vh" src="line1.svg" width="100%"> som kjører svg-koden så vises ikke den røde boksen.

 

http://www.icipher.net/testing/linjeindex.html

Kodene finner dere på på linken under

http://www.icipher.net/testing/testing.html

 

Er det noen som forklare meg hva jeg gjør feil.... klødd meg i hodet leeenge nå...

Endret 7. februar 2015 av GamEpaL

[Garanti]

Hei igjen,
kan dette være problemet:

 

http://stackoverflow.com/questions/12935136/svg-image-with-image-tags-does-not-show-up-in-firefox-16-when-referred-through

 

Gecko does not allow SVG loaded inside to load any external resources, for security reasons (basically to prevent images from phoning home when users won't expect them to). So you need to put any resources you want to use into data: URIs

Nå bruker vel Opera WebKit, men kan være at WebKit har samme begrensning.

 

Endret 7. februar 2015 av Garanti

[GamEpaL]

Jeg leste linken, men er litt usikker på hvordan jeg kan gjøre det slik at det virker. Jeg er ikke så god i svg og skjønte ikke helt løsningen slik at det kan virke.

 

Den røde boksen jeg henviser til og jeg ønsker å vise i svg er et png-bilde og ikke svg-kode type <rect...

Endret 8. februar 2015 av GamEpaL

[Garanti]

Når man ønsker å laste inn et dokument i nettleseren, sender nettleseren en forespørsel til en server og mottar data for dokumentet. Linker til andre elementer som skal brukes (bilder, video, stilark, javascript, etc.), hentes på samme måte: en forespørsel sendes per element.

 

Disse elementene kan ligge under samme webadresse, eventuelt ligger de på en annen server. I følge teksten jeg siterte vil ikke Firefox inkludere filer i SVG-filer som ligger i et HTML-dokument. Dvs. redbox.png vises bare når du laster inn svg-filen direkte i nettlesen, men ikke når svg-filen ligger i et html-dokument. Dette forklares som en sikkerhetstiltak – når du for eksempel sender en forespørsel om et bilde, vil serveren kunne logge at noen har bedt om bildet.

(Det samme prinsippet gjelder for så vidt for en del antispam-funksjonalitet. Spammail sendes ut i store mengder, gjerne til tilfeldig genererte epost-adresser. De inneholder gjerne <img>-elementer som linker til bilder på en server. En del epost-tilbydere lar være å laste inn bilder i mailer merket som spam, man unngår da at man sender en forespørsel til serveren til spammerene, noe som ville bekreftet at mailen har blitt åpnet av noen).

 

 

Videre fortelles det at du må benytte data URI dersom du ønsker å inkludere bildet. Dette er en måte å inkludere fildata i et dokument/element, slik at man slipper å sende en ny forespørsel for å laste inn filen.

 

Følgende inkluderes i href:

data: [mimetype]; [base64], [data]

Altså slik:

<image xlink:href="data: [mimetype]; [base64], [data]" (...)></image>

Bruk denne siden til å kode bildet til base64:

http://dataurl.net/#dataurlmaker

Endret 8. februar 2015 av Garanti

[GamEpaL]

Den viste seg å løse problemet gitt... og tusen takk for det... men... selvsagt er det noe til... he-he

 

Den røde boksen skal første dukke opp når alle strekene er tegnet og gjerne at den fades inn etter 8 sekunder.

 

Har prøvd

 

<animate begin="8s" /> har også <animatetransform begin="8s" />

[Garanti]

"Animating an element's attribute from one value to another over a duration of time, and specifying the end state: from, by, to, dur and fill"

 

http://css-tricks.com/guide-svg-animations-smil/

[GamEpaL]

Med litt redigering av koden så funka det veldig bra. Du kan jo se selv...

 

http://www.icipher.net/linjeindex.html

 

Takk for hjelpen... det kommer sikkert flere spørsmål etterhvert. Og med dine kunskaper så håper jeg du kan svare da også

Endret 9. februar 2015 av GamEpaL

[GamEpaL]

Nå skal jeg legge inn en link i svg-koden. La oss si denne linken skal peke til vg.no

 

.....

<style type="text/css">

a {stroke:#000}

a:hover {stroke:#FF9900}

</style>

......

 

<a xlink:href="http://www.vg.no">

<line x1="250" y1="110" x2="275" y2="110" style="stroke-width:5;" />

</a>

Jeg mistenker at når jeg kjører svg-koden fra et html-fil som før, så vil samme problem som bilde gjøre at jeg ikke ha linken der.

når jeg kjører svg-fila fra en browser så kan jeg klikke på linken, men hvis jeg kjører et html-fil der svg-koden kjøres via et <img..., så er ikke linken tilgjengelig

Endret 10. februar 2015 av GamEpaL

[Garanti]

Noen forslag:

 

Lag en id på <a>-tagen. Bruk så javascript for å sjekke om linken er trykket på, for så å sende brukeren videre. Slik:

document.getElementById('id').onClick = function() { location.href = "url"; }

...eeeeller:

Hvorfor legge svg-filen i et <img>-element i det hele tatt? Da tror jeg du omgår problemene med både bildeinkludering og linker:

 

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_text5

 

Fjern target="_blank" dersom du ønsker at linken ikke skal åpne i et nytt vindu.

 

Edit: Glemte .onClick

Endret 10. februar 2015 av Garanti

[GamEpaL]

Den funka gitt... Tusen takk..................................................... igjen

Endret 10. februar 2015 av GamEpaL