svg - стиль на предопределенных элементах

Question

Я пытаюсь применить CSS-стиль к svg-элементам. Я хочу сделать это без скрипта.

Хотя стиль кажется не работать на <defs>:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="300" height="80"> 

     <style> 
      rect:hover { 
       opacity: 0.5; 
      } 
     </style> 

     <defs> 
      <rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/> 

      <g id="month"> 
       <!-- first row --> 
       <g transform="translate(50 40)"> 
        <use xlink:href='#box'/> 
        <text x="5" y="15" fill="grey">Mon</text> 
       </g> 
       <g transform="translate(80 40)"> 
        <use xlink:href='#box'/> 
        <text x="5" y="15" fill="grey">Thu</text> 
       </g> 
      </g> 
     </defs> 

      <use xlink:href='#month'/> 

     </svg> 

Это работает:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="300" height="80"> 

     <style> 
      rect:hover { 
       opacity: 0.5; 
      } 
     </style> 

     <rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>  

    </svg> 

Есть ли способ применить CSS? Может ли быть другой способ применить его к элементу <defs>? Или любое обходное решение?

Answer 1

EDIT - это ответ на исходный вопрос, который был обновлен и недействителен.

Конечно, просто дать use класс или ID ..

.box { 
 
    fill: green; 
 
    stroke-width: 1; 
 
    stroke: rgb(0, 0, 0); 
 
} 
 
.box:hover { 
 
    fill: red; 
 
}

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80"> 
 
    <defs> 
 
    <rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" /> 
 
    </defs> 
 
    <use xlink:href='#box' class="box" /> 
 
</svg>