色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

& lt使用/>；a & ltsymbol/>；用& ltstyle/>；基于應用于父HTML的類應用CSS規則

CSS
劉柏宏2年前8瀏覽0評論

我想用SVG構建一個圖標集，并將其用于按鈕。這些圖標根據應用的CSS類改變它們的樣式。例如，想象一個漢堡菜單圖標，當菜單打開時，它變成一個關閉圖標。

為了可讀性更好，我簡化了所有例子中的路徑。請想象一下，這兩條路徑將擴展到最終顯示一個十字，并以CSS過渡為動畫。此處代碼的預期結果如下所示:

Paths expanding with stroke-dasharray

使用來自的圖標。svg文件 當然，我更喜歡使用外部sprite SVG進行緩存，比如

<!-- icons-file.svg -->
<svg>
  <def>
    <symbol id="menu" viewBox="0 0 100 100">
      <path d="M20,40H90"/>
      <path d="M20,60H70"/>
    </symbol>
    <!-- more symbols to come -->
    <style>
      #menu > path {
        /* ... */
        stroke-dasharray: 40 500;
      }
      .active #menu > path:nth-child(1) {
        stroke-dasharray: 80 500;
      }
      .active #menu > path:nth-child(2) {
        stroke-dasharray: 50 500;
        stroke-dashoffset: -10;
      }
    </style>
  </def>
</svg>

并在我的HTML中使用它

<a href="#"><svg><use href="icons-file.svg#menu"/></svg></a>

這甚至不會半途而廢，因為& ltstyle/>；標簽被& lt使用/>；。

內聯添加sprite SVG 謝天謝地，我在做單頁PWA。當然，cashing更好，但是如果內嵌SVG，我(希望)只會增加應用程序的初始加載，而不是每個頁面/視圖。

& lt使用/>；限制仍然存在，但是我可以在HTML層定義我的SVG樣式:

<html>
  <!-- ... -->
  <body>
    <svg>
      <def>
        <symbol id="menu" viewBox="0 0 100 100"><!-- ... --></symbol>
        <!-- more symbols to come -->
      </def>
    </svg>
    <style>
    #menu > path {
      /* ... */
      stroke-dasharray: 40 500;
    }
    .active #menu > path:nth-child(1) {
      stroke-dasharray: 80 500;
    }
    /* ... */
    </style>

    <a href="#"><svg><use href="#menu"/></svg></a>
  </body>
</html>

現在，圖標以其默認狀態正確顯示(作為漢堡菜單圖標)。但是無論我在哪里應用活動CSS類，甚至在& lt使用/>；節點，它永遠不會被尊重。據我理解這是因為CSS選擇器無法打破影子DOM的邊框。

但是等等，關于:主機選擇器呢？制定如下規則應該可以解決問題:

:host(.active) #menu > path:nth-child(1) {
  stroke-dasharray: 80 500;
}
/* or maybe */
:host(.active) path:nth-child(1) {
  stroke-dasharray: 80 500;
}

再次，沒有運氣。參見codepen上的示例。說實話，我也不知道原因。我猜是因為& lt使用/>；已關閉，但找不到任何信息，如果真的是這個原因。這個jsdild上的例子使用了一個自定義元素和open shadow DOM，效果非常好。

CSS屬性:繼承技巧 有人可能會說我應該這樣做:

path {
  stroke-dasharray: inherit;
}

然后，我可以將stroke-dasharray設置為任何外部值，例如

<a style="stroke-dasharray: 80 500"><svg><!-- ... --></svg></a>

是的，如果我只有一條路徑或者所有的路徑都有相同的長度，開始和結束的風格，那是可能的。事實并非如此。

每個圖標和每個實例的完整SVG 最后，我現在唯一的出路是將圖標的SVG直接放在錨點中:

<a href="#">
  <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M20,40H80V20"/>
    <path d="M20,60H70V70"/>
    <style>
      path {
        fill: none;
        stroke: black;
        stroke-width: 6px;
        transition: all 0.5s;
      }
      path:nth-child(1) {
        stroke-dasharray: 40 500;
      }
      .active path:nth-child(1) {
        stroke-dasharray: 80 500;
      }
      path:nth-child(2) {
        stroke-dasharray: 10 500;
      }
      .active path:nth-child(2) {
        stroke-dasharray: 50 500;
        stroke-dashoffset: -10;
      }
    </style>
  </svg>
</a>

這是codepen上的結果

這是最壞的情況。沒有緩存，對于我在列表中使用的圖標，我使用相同的代碼幾十次，結果很糟糕。

所以我的問題是:我要監督什么嗎？有沒有更好的辦法？

對于圖標，& lt使用& gt并且& ltsymbol & gt有它的用處...

它可以用更多的語義來實現，所有瀏覽器都支持原生JavaScript Web組件(JSWC ):

創建一個& lt模板是= & quot圖標名稱& quot& gt對于每個SVG圖標，包括其所有的[state]CSS/動畫樣式

您可以在CodePen中設計每個SVG，并將其整個復制到& lt模板& gt

定義本機Web組件& ltSVG-icon & gt； 克隆了& lt模板& gt在暗影世界。所以模板中的所有CSS都是有作用域的！

<template id="ICON-LINUS">
  <svg viewBox="0 0 100 100" >
    <path id="P1" d="M20 40H80V20" />
    <path id="P2" d="M20 60H70V70" />
    <style>
      path { fill: none; stroke: black; stroke-width: 8px;transition: all 0.5s }
      #P1 {  stroke:blue;   stroke-dasharray: 40 500 }
      :host([active]) #P1 { stroke-dasharray: 80 500 }
      #P2 { stroke:red;     stroke-dasharray: 10 500 }
      :host([active]) #P2 { stroke-dasharray: 50 500; stroke-dashoffset: -10 }
      :host([disabled]) { pointer-events:none }
    </style>
  </svg>
</template>

<style>
  svg-icon { cursor:pointer;display:inline-block;width:140px;background:grey }
  svg-icon[active]{ background:green }
</style>

<svg-icon is="LINUS"         ></svg-icon>
<svg-icon is="LINUS" active  ></svg-icon>
<svg-icon is="LINUS"         ></svg-icon>
<svg-icon is="LINUS" disabled></svg-icon>

<script>
  customElements.define("svg-icon", class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode:"open"})
           .append(document.getElementById("ICON-"+this.getAttribute("is"))
                           .content.cloneNode(true));
      this.onclick =
            () => this.toggleAttribute("active",!this.hasAttribute("active"));
    }
  });
</script>

您不能編寫跨越陰影DOM的選擇器，但是您可以繼承屬性值，其中包括自定義變量。這就是訣竅:在你使用圖標的地方，你設置一個變量為某個值。在圖標模板中，將這個變量的值賦給一個屬性。

a svg {
  width: 50px;
  height: 50px;
}

use[href="#menu"] {
  --state: 1;
}
a:hover use[href="#menu"] {
  --state: 2;
}

#menu path {
  fill: none;
  stroke:black;
  stroke-dasharray: calc(40px * var(--state)), 500px;
  transition: stroke-dasharray .2s;
}

<svg width="0" height="0">
      <symbol id="menu" viewBox="0 0 100 100">
        <path d="M20,40H90"/>
        <path d="M20,60H70"/>
      </symbol>
    </svg>

    <a href="#"><svg><use href="#menu"/></svg></a>
    <a href="#"><svg><use href="#menu"/></svg></a>