Cách áp dụng lớp CSS cho phần tử Văn bản SVG

Được rồi ... Tôi sẽ đến đây. Tôi đã bắt đầu thử nghiệm với SVG. Làm việc với SVG và áp dụng các lớp CSS cho nó hoạt động như một sự quyến rũ. Tôi chỉ không thể tìm ra những gì tôi đang làm sai, nhưng tôi chỉ không thể có được các lớp học để làm việc trên một yếu tố văn bản svg. Tôi đã bị tước tất cả các con đường xuống và đây là những gì tôi đã nhận:Cách áp dụng lớp CSS cho phần tử Văn bản 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>

Theo http://www.w3.org/TR/SVG/styling.html#ClassAttribute này nên làm việc ...

Bất kỳ gợi ý/lời khuyên về những gì để thay đổi, hoặc một sự thay thế?

Nguồn

2013-07-04 Bastiaan Linders

Nếu tôi đọc liên kết w3, bạn không thể đặt đường viền. nó được gọi là đột quỵ. –

Vâng, biên giới hoạt động tốt. Đột quỵ được sử dụng cho tất cả mọi thứ bạn thực sự "vẽ". Nhưng câu hỏi của tôi là về lớp trên phần tử văn bản, nơi tôi đặt màu của văn bản giống như trong liên kết w3. –

Đặt lớp là chính xác nhưng thuộc tính màu CSS không ảnh hưởng đến SVG. SVG sử dụng các thuộc tính fill và stroke. Trong trường hợp của bạn, bạn có thể chỉ cần thay đổi màu sắc để điền vào. Điều này hiển thị văn bản màu vàng cho tôi trong 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>

Nguồn

2013-07-04 10:05:36

Đã thử và không ... Và hãy nhớ. Màu sắc là những gì họ đưa ra làm ví dụ tại Khuyến nghị W3. Tôi đã lột nó xuống để tô màu để có thể thực hiện dễ dàng nhất có thể để kiểm tra. –

Thực hiện tốt bạn đã tìm thấy một lỗi trong đặc tả SVG. Tôi đã báo cáo nó với w3c: http://lists.w3.org/Archives/Public/www-svg/2013Jul/0001.html –

Vâng, không. Tôi đồng ý rằng có một lỗi. Nhưng nó không có trong tài liệu. Họ cơ bản tuyên bố những gì nó được cho là. Dường như tất cả các trình duyệt đều không thực hiện được điều này. Điều đó đánh tôi như rất khó xảy ra. Và hãy nhớ, nó không làm việc với điền hoặc đột quỵ hoặc. Có vẻ như bộ chọn lớp css hoàn toàn bị bỏ qua (chrome, FF và IE10). –

Cách áp dụng lớp CSS cho phần tử Văn bản SVG

Trả lời

Các vấn đề liên quan