文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在SVG中使用和样式(选择器)嵌套符号

问如何在SVG中使用和样式(选择器)嵌套符号
EN

Stack Overflow用户

提问于 2019-04-20 22:43:43

回答 2查看 260关注 0票数 1

我有以下几点：

<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...

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

javascript

html

css

svg

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-22 06:49:27

样式可以继承到<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 >#my符号-儿童都不管用。不能使用选择器针对该符号的特定实例。除了继承<use>之外，就像我在示例中所做的那样。

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

票数 1

Stack Overflow用户

发布于 2019-04-21 03:36:10

如果我没记错，那么诀窍是为每个<use>实例设置不同的属性，以便“继承”或"currentColor“(或者如果默认情况下它们是继承的，如果不需要，就不要设置它们)，然后将每个<use>放在<g>中，并将样式声明应用到每个<g>中。

SVG - inherit multiple colors

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55778380

复制

相似问题

问如何在SVG中使用和样式(选择器)嵌套符号
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中使用和样式(选择器)嵌套符号EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG中使用和样式(选择器)嵌套符号
EN