javascript - 如何在 SVG 中使用和设置样式(选择器)嵌套符号-6ren

javascript - 如何在 SVG 中使用和设置样式(选择器)嵌套符号

转载作者：行者123 更新时间：2023-11-28 14:17:03

我有如下内容:

<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 View 框。树林中的树木大小为 10x10，因此它们具有不同的缩放系统。

但基本上，我将这些符号组合到 grove 符号中，然后在 3 个不同的地方使用 use 添加这些符号。每一个都比前一个更大/更近。或者这就是它应该如何工作。

问题是我如何有效且正确地更改这些符号的颜色(最佳实践)。如果我可以像上面的示例 CSS 那样做:

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

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

请让我知道我应该如何构建这个 SVG 系统，以便我可以正确地设置每个 block 的样式(例如每个“树丛”及其内容)。

我希望它处理的另一个例子是，假设每棵树都有 Twig 。我想要 5 排树，就好像它是视差一样，每一排都比前一排更远，因此它们变得越来越轻。所以我想将 Twig 和“树叶”(主树三 Angular 形)的颜色设置为随着它们向后移动而越来越亮。此外，也许我想稍微改变特定行的树木颜色。所以我应该能够做这样的事情:

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

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

最佳答案

样式可以继承到 <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> 的样式这是 child 。
您可以设置 <use> 的样式元素。
但是，您不能使用跨越 <use> 的选择器“边界”。
```
#myuse > #mysymbol-child
```
将不起作用。您不能使用选择器来定位该符号的特定实例。除了继承自 <use>正如我在示例中所做的那样。

一个符号就是一个定义。如果你给它一个直接的风格，那么无论它有什么风格，这个符号都会在任何地方使用。这包括动画之类的东西。如果您为符号设置动画，则它的所有实例都将以相同的方式设置动画。

关于javascript - 如何在 SVG 中使用和设置样式(选择器)嵌套符号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55778380/

文章推荐： css - 如何绝对容器内的元素溢出 :hidden not be cropped

文章推荐： php - 使用循环从多个 PHP 回显属性设置 CSS x 和 y

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 SVG 中使用和设置样式(选择器)嵌套符号