Як застосувати колір до елемента тексту SVG

Гаразд ... Я з'їжджаю сюди. Я почав експериментувати з SVG. Робота з SVG та застосування до нього класів CSS працює як шарм. Я просто не можу зрозуміти, що я роблю неправильно, але я просто не можу змусити клас працювати над текстовим елементом svg. Я розібрав його до кінця, і ось що я отримав:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            color: yellow;
        }
    </style>
    <h2>SVG - Sandbox</h2>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
            <text x="65" y="40" class="caption">Fact</text>
        </svg>
    </div>
</body>
</html>

Відповідно до http://www.w3.org/TR/SVG/styling.html#ClassAttribute це має працювати ...

Будь-які підказки / поради щодо того, що змінити, або альтернатива?

— Бастіан Ліндерс
джерело

Якщо я прочитаю посилання w3, ви не зможете встановити межу. це називається інсульт.

— Kees Sonnema

Ну, кордон працює просто чудово. Обведення використовується для всього, що ви насправді «малюєте». Але моє запитання стосується класу на текстовому елементі, де я задав колір тексту так само, як у посиланні w3.

— Бастіан Ліндерс

Правильно встановити клас, але властивість кольору CSS не впливає на SVG. SVG використовує властивості заповнення та обведення . У вашому випадку вам, мабуть, просто потрібно змінити колір на заливку. Це відображає жовтий текст для мене у Firefox.

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>Playground</title>
</head>
<body>
    <style type="text/css">
        .mainsvg {
            height: 320px;
            border: 1px solid red;
            width: 400px;
        }
        .caption {
            fill: yellow;
        }
    </style>
    <h2>SVG - Sandbox</h2>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg">
            <text x="65" y="40" class="caption">Fact</text>
        </svg>
    </div>
</body>
</html>

— Роберт Лонгсон
джерело

Спробував і ні ... І пам’ятай. Колір - це те, що вони наводять як приклад у Рекомендації W3. Я видалив його до кольору, щоб отримати найпростішу реалізацію для тестування.

— Бастіан Ліндерс

Молодці, ви знайшли помилку в специфікації SVG. Я повідомив про це w3c: lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html

— Роберт Лонгсон

Ну ні. Я згоден, що є помилка. Але цього немає в документації. Вони в основному заявляють, що це повинно бути. Просто здається, що всі браузери не змогли це реалізувати. Що здається мені дуже малоймовірним. І пам’ятайте, це також не працює з заливкою або обведенням. Здається, селектор класу css повністю ігнорується (chrome, FF та IE10).

— Бастіан Ліндерс

Зачекайте .... text.caption справді працює. text .caption (з пробілом) не .... (це перевірено із заповненням усіх 3 браузерів) .caption працює також. Цікаво , що я випробував в перший раз , ви запропонували заливку і він не працює .....

— Bastiaan Linders

Встановлення лише colorвластивості не має безпосередньо видимого ефекту у svg, але ви можете використовувати цей колір для fill, strokeабо навіть для обох, наприклад text { fill: currentColor }.

— Ерік Далстрем