我可以在“路徑”的CSS中設定d="xxxx"以便在HTML中節省一些空間嗎？

我在一個 HTML 頁面中有許多 SVG。

這是它的樣子：

<div>
  <svg><path d="M230 ...." /></svg>
</div>
<section id="el2">
  <svg><path d="M230 ...." /></svg>
</section>
<div id="el3">
  <svg><path d="M230 ...." /></svg>
</div>
<p id="el4">
  <svg><path d="M230 ...." /></svg>
</p>
....

此頁面上的svg許多地方都有相同路徑的詳細資訊。

如果沒有 JavaScript，如何避免重復 svg 代碼？有沒有這樣的方法：

svg path {d:"M230 .... "}

我已經嘗試過了，但它不起作用。改善這一點的最佳方法是什么？

謝謝

uj5u.com熱心網友回復：

您可以創建自己的 SVG 字體，有類似Fontello的在線工具

關于 SVG 字體兼容性的說明（感謝 @herrstrietzel）
SVG 字體已被棄用，僅受舊版瀏覽器和 Safari 支持。為確保您的字體正常作業，請在字體中包含 WOFF(2) 和/或 TTF 檔案以獲得最大兼容性。Fontello 已經提供了它們，但是如果您只有 svg 格式，還有其他可用的轉換器。

在 CSS 中為它創建一個新font-face的，您實際上從生成器中獲取 CSS 代碼以準備復制和粘貼，以及一些其他有用的 CSS 以準備使用類。

@font-face {
  font-family: 'your-font-name';
  src: url('../font/your-font-name.eot?34609786');
  src: url('../font/your-font-name.eot?34609786#iefix') format('embedded-opentype'),
       url('../font/your-font-name.woff2?34609786') format('woff2'),
       url('../font/your-font-name.woff?34609786') format('woff'),
       url('../font/your-font-name.ttf?34609786') format('truetype'),
       url('../font/your-font-name.svg?34609786#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  /* More properties here, i removed them */
}

.icon-download:before { content: '\e804'; }

每個圖示都有自己的代碼，因此您的字體中可以有大量不同的 SVG。

然后你可以在 CSS:after和:beforeas中使用它content: '\e800';（e800 只是一個例子，你可能會有所不同）。

在你的 CSS 中，在你的 HTML 中，你可以使用它，如下所示：

<div>
  <i class="icon icon-download"></i>
</div>
<section id="el2">
  <i class="icon icon-download"></i>
</section>
<div id="el3">
  <i class="icon icon-download"></i>
</div>
<p id="el4">
  <i class="icon icon-download"></i>
</p>

所以總的來說，你的 html 中的代碼更少，用戶只需通過字體下載 SVG 一次。而且還有一個巨大的優勢，以這種方式添加新圖示的速度非常快。

uj5u.com熱心網友回復：

CSS 路徑（）函式

實際上，您可以通過函式d設定或更改css 中的屬性path()

因此，參考您的示例，您只需將路徑資料字串包裝在此函式中，如下所示：

svg path {d: path("M230 .... ")}

svg{
  height:10em;
}

.pathIcon{
  d: path("M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z");
  fill:red;
}

<svg class="icon" viewBox="0 0 34 48">
  <path class="pathIcon" />
</svg>

替代方案：外部<use>參考

這種方法將允許您在一個 svg 中存盤多個資產并從外部 svg 加載它們。

外部 svg 內容：“icons.svg”

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon-home" viewBox="0 0 34 48">
    <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
  </symbol>
  <symbol id="icon-close" viewBox="0 0 27 48">
    <path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
  </symbol>
</svg>

HTML 用法

<svg class="icon" viewBox="0 0 27 48">
 <use href="icons.svg#icon-close" />
</svg>

<svg class="icon" viewBox="0 0 34 48">
 <use href="icons.svg#icon-home" />
</svg>

這樣您就可以將大量圖示存盤在一個檔案中，而無需直接行內它們。您仍然可以通過 css 設定圖形樣式。

行內 svg 示例（外部 svg 在片段中不起作用）

顯示代碼片段

svg{
  height:10em;
}

.icon-home{
fill:red;
}

.icon-close{
stroke:green;
stroke-width:1px;
fill:none
}

<svg class="icon icon-close" viewBox="0 0 27 48">
 <use href="#icon-close" />
</svg>

<svg class="icon icon-home" viewBox="0 0 34 48">
 <use href="#icon-home" />
</svg>

<!-- external svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <symbol id="icon-home" viewBox="0 0 34 48">
    <path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
  </symbol>
  <symbol id="icon-close" viewBox="0 0 27 48">
    <path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
  </symbol>
</svg>

uj5u.com熱心網友回復：

如果您只是希望相同的 SVG 影像出現在多個 HTML 元素的開頭，那么使用::beforeCSS 規則可能更方便。這是一個例子：

.decorated::before {
  content:url('data:image/svg xml,');
  display:inline-block;
  width:0.75em;
  height:0.75em;
  margin-right:0.25em;
}

<h1 class="decorated">Lorem ipsum</h1>
<h2 class="decorated">Dolor sit amet</h2>
<h3 class="decorated">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<h4 class="decorated">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
<p class="decorated">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p class="decorated">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

標籤：html css svg

上一篇：自動停止SVG影片

下一篇：PropertyWrapper不存在的Codable屬性的默認值