Media Queries in SVG-Dateien

Media Queries in SVG-Dateien

CSS Media Queries können auch in SVG-Dateien verwendet werden

Diese Technik funktioniert derzeit im Firefox, Safari und Google Chrome.

Fenstergröße verändern

spacer

CSS in der SVG-Datei

<svg width="100%" height="100%" ...>
    <style type="text/css">
        @media (max-width: 140px) {
            .c {fill: #f0f}
        }
        @media (min-width: 150px) and (max-width: 200px) {
            .c {fill: #fff200}
        }
        ...
    </style>
    <g>
        <path class="c" fill="#FF8A00" d="M 0,18..." />
    </g>
</svg>

Link zur SVG-Grafik mit CSS Media Queries

Impressum