改变SVG中不同路径的颜色/在页面上多次使用相同的SVG。

huangapple
go评论65阅读模式
英文:

Change color of different paths in SVGs / same SVG multiple times in page

问题

在一个页面上，SVG地图多次出现，我尝试不在每个div中都放置整个地图的SVG。我想要在不同的地方突出显示该国家的不同状态。我可以用CSS来实现吗？我只使用了这四个正方形，而不是在这里放整个地图。例如，在div1中，我想要将左上角的正方形标记为红色，在div2中将上右角的正方形标记为绿色，等等。

我尝试使用CSS来"到达"每个正方形，例如.div1.dkarte-box.dkarte.sq1和其他组合...

英文:

On a page where a map (SVG) is occuring several times I tried not to put the whole map-SVG in each div. I want to highlight a different state of the country in the different places. Can I do that with CSS? Instead of putting the whole map here, I used just these four squares. For example in div1 I want the upper left square in red, in div2 the upper right etc.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVGs</title>
    <!-- <link rel="stylesheet" href="karte.css" /> -->
  </head>

  <body>
    <style>
      :root {
        --colorSQ1: red;
        --colorSQ2: green;
        --colorSQ3: blue;
        --colorSQ4: yellow;
      }
    </style>
    <div style="display: none">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <symbol viewBox="0 0 200 200" id="4squares" style="fill: lightblue">
          <g class="sq1">
            <rect id="sq-1" width="50" height="50" x="0" y="0" />
          </g>
          <g class="sq2">
            <rect id="sq-2" width="50" height="50" x="50" y="0" />
          </g>
          <g class="sq3">
            <rect id="sq-3" width="50" height="50" x="0" y="50" />
          </g>
          <g class="sq4">
            <rect id="sq-4" width="50" height="50" x="50" y="50" />
          </g>
        </symbol>
      </svg>
    </div>

    <section class="d-karte">
      <div class="div1" id="div1">
        <h4>squares I</h4>
        <div class="dkarte-box">
          <span
            ><svg class="dkarte">
              <use xlink:href="#4squares"></use></svg
          ></span>
        </div>
      </div>
      <div class="div2">
        <h4>squares II</h4>
        <div class="dkarte-box">
          <span
            ><svg class="dkarte">
              <use xlink:href="#4squares"></use></svg
          ></span>
        </div>
      </div>
      <div class="div3">
        <h4>squares III</h4>
        <div class="dkarte-box">
          <span
            ><svg class="dkarte">
              <use xlink:href="#4squares"></use></svg
          ></span>
        </div>
      </div>
      <div class="div4">
        <h4>squares IV</h4>
        <div class="dkarte-box">
          <span
            ><svg class="dkarte">
              <use xlink:href="#4squares"></use></svg
          ></span>
        </div>
      </div>
    </section>
  </body>
</html>

I tried "reaching" each square in CSS with for example .div1.dkarte-box.dkarte.sq1 and other combinations...

答案1

得分: 1

你可以为每个矩形的填充样式分配一个CSS变量：

<svg>
  <symbol viewBox="0 0 200 200" id="4squares">
    <rect id="sq-1" width="50" height="50" x="0" y="0" style="fill:var(--colorSQ1)" />
  </symbol>
</svg>

或者使用CSS规则：

#sq-1 {
  fill: var(--colorSQ1);
}

.div1 svg {
  --colorSQ1: orange;
}

并在不同实例中重新定义这个变量，例如：

<svg class="dkarte" style="--colorSQ1: #ccc;">
  <use xlink:href="#4squares" />
</svg>

在CSS中重新定义变量：

#sq-2 {
  fill: var(--colorSQ2);
}

#sq-3 {
  fill: var(--colorSQ3);
}

#sq-4 {
  fill: var(--colorSQ4);
}

:root{
  --colorSQ1: #111;
  --colorSQ2: #222;
  --colorSQ3: #333;
  --colorSQ4: #444;
}

.div2 svg {
  --colorSQ1: orange;
}

.div3 svg {
  --colorSQ2: orange;
}

.div4 svg {
  --colorSQ3: orange;
}

然而，这种方法只适用于静态颜色更改。 你不能通过CSS访问<symbol>的子元素，例如在悬停在特定矩形上时更改颜色。

英文:

You could assign a css variable to each rectangle's fill style

&lt;svg&gt;
  &lt;symbol viewBox=&quot;0 0 200 200&quot; id=&quot;4squares&quot;&gt;
      &lt;rect id=&quot;sq-1&quot; width=&quot;50&quot; height=&quot;50&quot; x=&quot;0&quot; y=&quot;0&quot; style=&quot;fill:var(--colorSQ1)&quot; /&gt;
  &lt;/symbol&gt;
&lt;/svg&gt;

or as a CSS rule

#sq-1 {
  fill: var(--colorSQ1);
}

.div1 svg {
  --colorSQ1: orange;
}

and redefine this variable for different instances like so:

  &lt;svg class=&quot;dkarte&quot; style=&quot;--colorSQ1: #ccc;&quot;&gt;
    &lt;use xlink:href=&quot;#4squares&quot; /&gt;
  &lt;/svg&gt;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#sq-2 {
  fill: var(--colorSQ2);
}

#sq-3 {
  fill: var(--colorSQ3);
}

#sq-4 {
  fill: var(--colorSQ4);
}

:root{
  --colorSQ1: #111;
  --colorSQ2: #222;
  --colorSQ3: #333;
  --colorSQ4: #444;
}



.div2 svg {
  --colorSQ1: orange;
}

.div3 svg {
  --colorSQ2: orange;
}

.div4 svg {
  --colorSQ3: orange;
}

<!-- language: lang-html -->

  &lt;div style=&quot;display: none&quot;&gt;
    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; fill=&quot;red&quot;&gt;
      &lt;symbol viewBox=&quot;0 0 200 200&quot; id=&quot;4squares&quot;&gt;
        &lt;g class=&quot;sq1&quot;&gt;
          &lt;rect id=&quot;sq-1&quot; width=&quot;50&quot; height=&quot;50&quot; x=&quot;0&quot; y=&quot;0&quot; style=&quot;fill: var(--colorSQ1)&quot; /&gt;
        &lt;/g&gt;
        &lt;g class=&quot;sq2&quot;&gt;
          &lt;rect id=&quot;sq-2&quot; width=&quot;50&quot; height=&quot;50&quot; x=&quot;50&quot; y=&quot;0&quot; /&gt;
        &lt;/g&gt;
        &lt;g class=&quot;sq3&quot;&gt;
          &lt;rect id=&quot;sq-3&quot; width=&quot;50&quot; height=&quot;50&quot; x=&quot;0&quot; y=&quot;50&quot; /&gt;
        &lt;/g&gt;
        &lt;g class=&quot;sq4&quot;&gt;
          &lt;rect id=&quot;sq-4&quot; width=&quot;50&quot; height=&quot;50&quot; x=&quot;50&quot; y=&quot;50&quot; /&gt;
        &lt;/g&gt;
      &lt;/symbol&gt;
    &lt;/svg&gt;
  &lt;/div&gt;

  &lt;section class=&quot;d-karte&quot;&gt;
    &lt;div class=&quot;div1&quot; id=&quot;div1&quot;&gt;
      &lt;h4&gt;squares I&lt;/h4&gt;
      &lt;div class=&quot;dkarte-box&quot;&gt;
        &lt;span&gt;
          &lt;svg class=&quot;dkarte&quot; style=&quot; --colorSQ4: orange;&quot; &gt;
            &lt;use xlink:href=&quot;#4squares&quot; /&gt;
          &lt;/svg&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;div2&quot;&gt;
      &lt;h4&gt;squares II&lt;/h4&gt;
      &lt;div class=&quot;dkarte-box&quot;&gt;
        &lt;span&gt;
          &lt;svg class=&quot;dkarte&quot;&gt;
            &lt;use xlink:href=&quot;#4squares&quot; /&gt;
          &lt;/svg&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;div3&quot;&gt;
      &lt;h4&gt;squares III&lt;/h4&gt;
      &lt;div class=&quot;dkarte-box&quot;&gt;
        &lt;span&gt;
          &lt;svg class=&quot;dkarte&quot;&gt;
            &lt;use xlink:href=&quot;#4squares&quot; /&gt;
          &lt;/svg&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;div4&quot;&gt;
      &lt;h4&gt;squares IV&lt;/h4&gt;
      &lt;div class=&quot;dkarte-box&quot;&gt;
        &lt;span&gt;
          &lt;svg class=&quot;dkarte&quot;&gt;
            &lt;use xlink:href=&quot;#4squares&quot; /&gt;
          &lt;/svg&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;

<!-- end snippet -->

However this approach will only work for static color changes.
You can't access &lt;symbol&gt; children via css - for instance change colors when hovering a particular rect.

huangapple
  • 本文由 发表于 2023年7月17日 20:47:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76704613.html
  • css
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定