SVG kép hibásan jelenik meg
2021-05-31T11:55:23+02:00
2021-05-31T14:13:21+02:00
2022-07-19T00:30:57+02:00
*deleted_23419333
Sziasztok!

Témakörnek HTML-t (illetve PHP-t) adtam meg, mivel nem volt SVG.

Ezt sikerült összehoznom:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <rect fill="#FF0000" width="2" height="14" x="1" y="1" /> <rect fill="#FF0000" width="10" height="2" x="3" y="1" /> <rect fill="#FF0000" width="2" height="14" x="13" y="1" /> <rect fill="#FF0000" width="10" height="2" x="3" y="13" /> <rect fill="#FF0000" width="6" height="2" x="5" y="3" /> <rect fill="#FF0000" width="2" height="2" x="7" y="5" /> <rect fill="#FF0000" width="2" height="6" x="5" y="7" /> <rect fill="#FF0000" width="2" height="4" x="7" y="9" /> <rect fill="#FF0000" width="2" height="6" x="9" y="7" /> </svg>

Ez remekül működik, ha megnyitom egy böngészőben, viszont ha hozzáadom a WordPress-hez, akkor valami nem okés. Így adom hozzá:

$icon = 'data:image/svg+xml;base64,' . base64_encode ( '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect fill="#FF0000" width="2" height="14" x="1" y="1" /><rect fill="#FF0000" width="10" height="2" x="3" y="1" /><rect fill="#FF0000" width="2" height="14" x="13" y="1" /><rect fill="#FF0000" width="10" height="2" x="3" y="13" /><rect fill="#FF0000" width="6" height="2" x="5" y="3" /><rect fill="#FF0000" width="2" height="2" x="7" y="5" /><rect fill="#FF0000" width="2" height="6" x="5" y="7" /><rect fill="#FF0000" width="2" height="4" x="7" y="9" /><rect fill="#FF0000" width="2" height="6" x="9" y="7" /></svg>' );

Ezt eredményezi: m.png (ötszörös nagyításban: m@5x.png)

A probléma, hogy látszódnak a rácsok.



Esetleg létre lehetne hozni az alábbi témakört: Web-programozás - SVG
Mutasd a teljes hozzászólást!
Hali!

Ez remekül működik, ha megnyitom egy böngészőben…

… és megfelelő méret van beállítva (értsd: nem jön elő a „hiba”), így az SVG-elemek (esetedben téglalapok) tényleges koordinátáinak kiszámítása (és az adott helyen történő megjelenítése) során a kerekítési és egyéb hibák nem jelennek meg (más méretnél meg igen). Valamint böngésző-motor függvénye (is lehet).

Ha ilyen egyszerű logót szeretnél SVG-ben/-vel megoldani, miért nem path-t használsz? A szintaktikája tök egyszerű, a lényege pedig az, hogy egy nagy négyzetből „kivonod” az M-betűt (már ha azt jelképezi a képeden). Ehhez nem kell mást tenned (alapesetben, lásd fill-rule tulajdonság), mint a nagy négyzet „útvonalát” egyik irányba (mondjuk, óramutató járásával megegyezően) adod meg, míg a belőle kivonandó alakzat „útvonalát” ellentétesen (így lényegében az M-betű nem lesz az alakzat része). Például:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path d=" M1 1 H15 V15 H1 V1 M3 3 V13 H5 V7 H7 V9 H9 V7 H11 V13 H13 V3 H11 V5 H9 V7 H7 V5 H5 V3 H3" fill="#FF0000" stroke="transparent" /> </svg>
Működés közben: JSFiddle (itt látható, hogy a te alakzatod nem lesz tökéletes mindig, hiába inline SVG-ként használod).

Mutasd a teljes hozzászólást!

abcd