it-swarm.dev

كيفية تطبيق لون على عنصر SVG Text

حسنا ... أنا ذاهب المكسرات هنا. لقد بدأت تجربة 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 يجب أن يعمل هذا ...

أي تلميحات/نصائح حول ما يجب تغييره ، أو بديل؟

54
Bastiaan Linders

إعداد الفئة صحيح ولكن خاصية ألوان CSS ليس لها أي تأثير على SVG. تستخدم SVG fill و stroke الخصائص. في حالتك ربما تحتاج فقط إلى تغيير اللون لملء الفراغ. يعرض هذا النص الأصفر في 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>
70
Robert Longson