Question

我有如下内容：

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      grove > tree > triangle {
        /* some triangle styles */
      }

      #grove1 > tree > triangle {
        /* some triangle styles for grove 1 */
      }

      #grove2 > tree > triangle {
        /* some triangle styles for grove 2 */
      }

      #grove3 > tree > triangle {
        /* some triangle styles for grove 3 */
      }

      #grove3 > tree {
        /* animate the tree */
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000">
      <defs>
        <symbol id="triangle" viewBox="0 0 100 100">
          <polygon points="0,100 50,0 100,100" class="triangle" />
        </symbol>

        <symbol id="tree" viewBox="0 0 100 100">
          <use href="#triangle" width="100" height="100" />
        </symbol>
        
        <symbol id="grove" viewBox="0 0 100 100">
          <use href="#tree" width="10" height="10" />
          <use href="#tree" width="10" height="10" x="20" />
          <use href="#tree" width="10" height="10" x="40" />
          <use href="#tree" width="10" height="10" x="60" />
          <use href="#tree" width="10" height="10" x="80" />
        </symbol>
      </defs>

      <use id="grove1" href="#grove" x="10" y="10" height="10"/>
      <use id="grove2" href="#grove" x="30" y="100" height="100"/>
      <use id="grove3" href="#grove" x="50" y="600" height="600"/>
    </svg>
  </body>
</html>

请注意，符号嵌套了3层深度。尺寸定义在每个符号处都会改变。例如，在grove符号中，viewBox为100x100，但其中包含的树也具有自己的100x100视图框。树林中树木的大小调整为10x10，因此它们具有不同的缩放系统。

不过，基本上，我将这些符号组合到grove符号中，然后在3个不同的位置添加使用use的符号。每一个都比以前大/近。或就是这样。

问题是我如何才能有效，正确地更改这些符号上的颜色（最佳做法）。如果我可以做类似上面的示例CSS：

grove > tree > triangle {
  /* some triangle styles */
}

或者如果我必须在这种情况下以某种方式使用JavaScript来更改样式，或者根本不使用符号，或者为我想要的每种颜色变化创建符号（以某种方式）。

请让我知道我应该如何构造该SVG系统，以便我可以正确设置每块内容的样式（例如，每个“树林”及其内容）。

我要处理的另一个示例是，说每棵树都有分支。我想有5排树，就好像它是视差，并且每一行的距离都比以前的远，因此它们变得越来越轻。因此，我想将分支和“叶子”（主树三角形）的颜色设置为随着它们向后移动而越来越轻。另外，也许我想稍微改变特定行上树木的颜色。因此，我应该能够执行以下操作：

#grove1 > tree > branch { /* style */ }
#grove1 > #tree1 { /* style */ }
#grove1 > #tree2 { /* style */ }
#grove1 > #tree2 > #branch1 { /* style */ }
#grove1 > #tree2 > #branch2 { /* style */ }
#grove1 > etc...

基本上如何分别设置嵌套符号的样式。如果不可能，那么我应该使用什么设计模式。

Answer 1

样式可以继承到<use>的子代中，如下所示：

<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      #grove {
        /* some triangle styles */
      }

      #grove1 {
        /* some triangle styles for grove 1 */
        fill: red;
      }

      #grove2 {
        /* some triangle styles for grove 2 */
        fill: green;
      }

      #grove3 {
        /* some triangle styles for grove 3 */
        fill: gold;
      }

      #grove3 > tree {
        /* animate the tree */
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000">
      <defs>
        <symbol id="triangle" viewBox="0 0 100 100">
          <polygon points="0,100 50,0 100,100" class="triangle" />
        </symbol>

        <symbol id="tree" viewBox="0 0 100 100">
          <use href="#triangle" width="100" height="100" />
        </symbol>
        
        <symbol id="grove" viewBox="0 0 100 100">
          <use href="#tree" width="10" height="10" />
          <use href="#tree" width="10" height="10" x="20" />
          <use href="#tree" width="10" height="10" x="40" />
          <use href="#tree" width="10" height="10" x="60" />
          <use href="#tree" width="10" height="10" x="80" />
        </symbol>
      </defs>

      <use id="grove1" href="#grove" x="10" y="10" height="10"/>
      <use id="grove2" href="#grove" x="30" y="100" height="100"/>
      <use id="grove3" href="#grove" x="50" y="600" height="600"/>
    </svg>
  </body>
</html>

您可以设置<symbol>的样式，它是孩子的样式。
您可以设置<use>元素的样式。
但是，您不能拥有跨越<use>“边界”的选择器。
```
#myuse > #mysymbol-child
```
不起作用。您不能使用选择器来定位该符号的特定实例。除了像我在示例中所做的那样，继承自<use>。

符号是一个定义。如果您给它一个直接的样式，那么无论它具有什么样式，该符号都会在任何地方使用。其中包括动画。如果为符号设置动画，则所有符号实例都将以相同的方式进行动画处理。

Answer 2

如果我没记错的话，这样做的窍门是将要为<use>的每个实例设置的属性分别设置为“继承”或“ currentColor”（或者默认情况下是继承它们，不需要设置它们，如果不需要的话），然后将每个<use>放在<g>中，然后将样式声明应用于每个<g>。

SVG - inherit multiple colors

如何在SVG中使用和设置（选择器）嵌套符号样式

2 个答案: