Media Query in einer SVG Datei

[Rolf B]

Hallo,

ich möchte Etiketten für Marmelade erstellen. Da ich meine Corel Draw CD verlegt habe und die neueren Essentials-Versionen von Coreldraw dermaßen kastriert zu sein scheinen, dass ich nicht bereit bin, dafür 130€ auszugeben, bin ich auf die Idee verfallen, das Problem mit SVG zu lösen.

Derzeit bin ich noch in der Bastelphase, d.h. ich habe im Etikett etliche Hilfslinien drin. Diese haben eine Klasse "ruler", und im SVG steckt eine Media-Query:

<svg width="800" viewBox="0 0 550 270" xmlns="http://www.w3.org/2000/svg" >
  <style>
    @media print {
      .ruler {
        display: none;
      }
    }
    .ruler {
      stroke-width: 0.5px;
    }

...
</svg>

Zeige ich das SVG alleine an, wird die Media-Query beachtet.

Binde ich das SVG mit einem img Element in ein HTML Dokument ein (um eine Seite voller Etiketten zu drucken), wird die Media-Query NICHT beachtet. Aber wenn man diverse Diskussionen liest, scheint es Konsens bei den Browserbauern zu sein, dass man das so will.

Generell sind Media-Queries in eingebetteten SVGs ein wunder Punkt bei den Browsern. Es gibt einen Blogbeitrag von Jake Archibald, in dem er auf die mannigfaltigen Möglichkeiten hinweist, sowas wie @media (min-width:...) zu interpretieren. Aber ich will ja nur media screen/print unterscheiden, ohne dafür 2 SVGs zu bauen.

Wenn ich einen Tipp bekomme, welche Stelle geeignet ist, schreib ich auch gern was dazu ins Wiki. Die hier?

Man kann ein SVG auch per <object> einbinden. In dem Fall ist es in Chrome schick - die Media-Query wird beachtet.

But what does the Fox say?^[1]

Der beachtet sie auch, verschiebt aber das Bild nach unten.

Der Demogorgon Die Demopage ist als problematische Seite verlunken.

Mach ich da was falsch? Oder ist der Fuchs einfach nur besoffen?

Rolf

---

1. Zitiert aus Jakes Blogbeitrag ↩︎