SVG CSS вложенность

0

1

      .tile_empty polygon
      {
        fill:   rgb(255, 255, 255);
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }
      
      .tile_empty circle
      {
        fill:   rgb(200, 200, 200);
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }

  <g id = "master_tile">
   <polygon points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
   <circle cx="0" cy="0" r="130"/> 
  </g>

  <use id = "master_tile_empty" xlink:href="#master_tile" class = "tile_empty" />

  <use xlink:href="#master_tile_empty" transform="translate(500, 172)"/>

Не работает, css не применяется. Если убрать в css .polygon и .circle то работает, но применяет разумеется сразу к двум элементам. Как сделать им разные свойства?

Ссылка

←	Удаление части строки по шаблону

Грязные хаки андроида

→

Как я понимаю, обычные css-стили не умеют учитывать вложенность через use. То, что внутри SVG это какой-то shadow DOM, в который надо прокидывать свойства хитростью. Это позволили бы сделать CSS Variables, но пока такое умеет только Firefox. Вот статья по теме:

http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

amomymous ★★★
(01.10.15 00:02:08 MSK)

Вот отличная статья. Затянутая, немного, но по делу всё.

Вот так точно сработает. То есть, если не ставить у родителя стиль, то можно будет поставить у юзов.

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="220" height="170">
     
    <g style="display:none;">
        <circle id="circle" cx="60" cy="60" r="50" />
    </g>
    
    <use xlink:href="#circle" transform="translate(0,0)"
       style="fill:#00ffff;stroke:#00a5ff" />
    <use xlink:href="#circle" transform="translate(100,0)"
       style="fill:#ffff00;stroke:#ffa500" />
</svg>

anonymous
(01.10.15 03:23:51 MSK)

Ответ на: комментарий от anonymous 01.10.15 03:23:51 MSK

Вы не поняли, мне нужно две фигуры, одна на другой. У вас только одна, без ссылки на мастер-фигуру. Тем более вынести css наверх мне нужно для того, чтобы можно было менять стили только в одном месте. SVG у меня автоматическигенерируется, поэтому такие нужды.

В общем ясно, напрямую не получилось, сделал так:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
    <style type="text/css"><![CDATA[
      #masters
      {
        display: none;
      }
      
      .tile_empty_polygon
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
        
      .tile_empty_circle
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
      
      .tile_blue_polygon
      {
        fill:   #1e2869;
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }
      
      .tile_blue_circle
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
      
      .tile_red_polygon
      {
        fill:   #a62f2f;
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }
      
      .tile_red_circle
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
      
      .tile_green_polygon
      {
        fill:   #849f25;
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }
      
      .tile_green_circle
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
      
      .tile_gold_polygon
      {
        fill:   #e2cf51;
        stroke: rgb(  0,   0,   0);
        stroke-width:          1px;
      }
      
      .tile_gold_circle
      {
          fill:   rgb(255, 255, 255);
          stroke: rgb(  0,   0,   0);
          stroke-width:          1px;
      }
      
      .arrow
      {
        fill:   rgb(255, 255, 255);
        stroke: rgb(  0,   0,   0);
        stroke-width:          5px;
      }
      
      
    ]]></style>
  </defs>
  
 <g id="masters">
  <g id = "master_tiles">
   <g id = "master_tile_empty">
    <polygon class = "tile_empty_polygon" points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
    <circle  class = "tile_empty_circle"  cx="0" cy="0" r="130"/> 
   </g>
   
   <g id = "master_tile_gold">
    <polygon class = "tile_gold_polygon" points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
    <circle  class = "tile_gold_circle"  cx="0" cy="0" r="130"/> 
   </g>
   
   <g id = "master_tile_red">
    <polygon class = "tile_red_polygon" points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
    <circle  class = "tile_red_circle"  cx="0" cy="0" r="130"/> 
   </g>
   
   <g id = "master_tile_green">
    <polygon class = "tile_green_polygon" points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
    <circle  class = "tile_green_circle"  cx="0" cy="0" r="130"/> 
   </g>
   
   <g id = "master_tile_blue">
    <polygon class = "tile_blue_polygon" points="-100,-172 100,-172 200,0 100,172 -100,172 -200,0"/> 
    <circle  class = "tile_blue_circle"  cx="0" cy="0" r="130"/> 
   </g>
  </g>
  
  <g id = "master_arrows">
   <path class = "arrow" id = "master_arrow" d="M 50 200 L -50 200 L -50 50 L -150 50 L 0 -200 L 150 50 L 50 50 Z"/>
   <g id = "master_arrows_uses">
    <use id = "master_arrow_n"  xlink:href="#master_arrow" transform = "rotate(  0) scale(0.2, 0.2)"/> 
    <use id = "master_arrow_ne" xlink:href="#master_arrow" transform = "rotate( 60) scale(0.2, 0.2)"/> 
    <use id = "master_arrow_se" xlink:href="#master_arrow" transform = "rotate(120) scale(0.2, 0.2)"/> 
    <use id = "master_arrow_s"  xlink:href="#master_arrow" transform = "rotate(180) scale(0.2, 0.2)"/> 
    <use id = "master_arrow_sw" xlink:href="#master_arrow" transform = "rotate(240) scale(0.2, 0.2)"/> 
    <use id = "master_arrow_nw" xlink:href="#master_arrow" transform = "rotate(300) scale(0.2, 0.2)"/> 
   </g>
  </g>
 </g>
 
 <g id="tiles">
  <use xlink:href="#master_tile_empty" transform="translate(500, 172)"/>
  <use xlink:href="#master_tile_empty" transform="translate(800, 344)"/>
  <use xlink:href="#master_tile_gold"  transform="translate(800, 688)"/>
  <use xlink:href="#master_tile_green" transform="translate(500, 860)"/>
  <use xlink:href="#master_tile_red"   transform="translate(200, 688)"/>
  <use xlink:href="#master_tile_blue"  transform="translate(200, 344)"/>
 </g>
 
 <g id="arrows">
  <use xlink:href="#master_arrow_n"  transform="translate(800, 516)"/>
  <use xlink:href="#master_arrow_ne" transform="translate(650, 774)"/>
  <use xlink:href="#master_arrow_nw" transform="translate(650, 258)"/>
  <use xlink:href="#master_arrow_s"  transform="translate(200, 516)"/>
  <use xlink:href="#master_arrow_se" transform="translate(350, 774)"/>
  <use xlink:href="#master_arrow_sw" transform="translate(350, 258)"/>
 </g>

</svg>

Edible
(01.10.15 16:44:35 MSK) автор топика