如何用css剪切部分SVG？-有解無憂

我在 SVG 中有一個徽標（最小示例）：

<svg class="hide-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 695 189.08">
    <path d="1....">
    <path d="2....">
    <path d="3....">
</svg>

當.hide-text類存在時，我想從 svg 元素中洗掉文本（標識）。目前，我正在這樣做：

.hide-text {
   path {
      &:nth-child(n 3):nth-child(-n 10), &:last-child { /* paths for text part */
         display: none;
         /* visibility: hidden; */
         /* opacity: 0; */
         /* d: path('0') !important; */
      }
   }
}

問題是它們都只是“隱藏”了路徑，而父 SVG 元素仍在占用空間！
（d僅適用于 Chrome，這不好）

如何使用 CSS 洗掉一些路徑？

更新

這是一個示例影像來澄清這個問題：如何用css剪切部分SVG？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.85 206.39">
    <defs>
        <style>.a{fill:#1d1d1b;}</style>
    </defs>
    <title>logotest</title>

    <path class="a" d="M367.19,678.65H327.13v-89H300.82V557.23h94.7v32.38H367.19Z" transform="translate(-82.13 -472.67)"/>

    <path class="a" d="M404.22,557.23h76.9v30.36H444.29v15.17h32.17V631.9H444.29v16.39h36.83v30.36h-76.9Z" transform="translate(-82.13 -472.67)"/>

    <path class="a" d="M541.21,644h-1.82l-12.34,34.61H486.17l23.68-62.13-21-59.29h43.7L541.82,592h1.42l10.32-34.81h38.85l-19.22,59.5,22.46,61.92h-42.9Z" transform="translate(-82.13 -472.67)"/>

    <path class="a" d="M664.65,678.65H624.58v-89h-26.3V557.23H693v32.38H664.65Z" transform="translate(-82.13 -472.67)"/>

    <path class="a" d="M208.52,472.67,106.81,502.89,82.13,606.09l77,73,101.71-30.22,24.69-103.2Zm19.36,144.92-58.15,17.28-44-41.73,14.12-59L198,516.86l44,41.73Z" transform="translate(-82.13 -472.67)"/>
</svg>

uj5u.com熱心網友回復：

這是一種方法。

首先，我們將 SVG 更改為具有preserveAspectRatio="xMinYMid slice". 簡單來說，這告訴瀏覽器，如果我們減小 SVG 的寬度，則保持 SVG 的左側可見。

然后我們需要做的就是隱藏文本，并將寬度和高度設定為將導致 SVG 的文本部分被切斷的值。一個正方形似乎有效。見類.two。

svg {
  background-color: linen;
}

.one {
  width: 100%;
  height: 100%;
}

.two {
  width: 200px;
  height: 200px;
}

.hide-text .text {
  display: none;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.85 206.39" preserveAspectRatio="xMinYMid slice" class="one">
    <defs>
        <style>.a{fill:#1d1d1b;}</style>
    </defs>
    <title>logotest</title>

    <g class="text">
      <path class="a" d="M367.19,678.65H327.13v-89H300.82V557.23h94.7v32.38H367.19Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M404.22,557.23h76.9v30.36H444.29v15.17h32.17V631.9H444.29v16.39h36.83v30.36h-76.9Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M541.21,644h-1.82l-12.34,34.61H486.17l23.68-62.13-21-59.29h43.7L541.82,592h1.42l10.32-34.81h38.85l-19.22,59.5,22.46,61.92h-42.9Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M664.65,678.65H624.58v-89h-26.3V557.23H693v32.38H664.65Z" transform="translate(-82.13 -472.67)"/>
    </g>

    <path class="a" d="M208.52,472.67,106.81,502.89,82.13,606.09l77,73,101.71-30.22,24.69-103.2Zm19.36,144.92-58.15,17.28-44-41.73,14.12-59L198,516.86l44,41.73Z" transform="translate(-82.13 -472.67)"/>
</svg>



<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610.85 206.39" preserveAspectRatio="xMinYMid slice" class="two hide-text">
    <defs>
        <style>.a{fill:#1d1d1b;}</style>
    </defs>
    <title>logotest</title>

    <g class="text">
      <path class="a" d="M367.19,678.65H327.13v-89H300.82V557.23h94.7v32.38H367.19Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M404.22,557.23h76.9v30.36H444.29v15.17h32.17V631.9H444.29v16.39h36.83v30.36h-76.9Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M541.21,644h-1.82l-12.34,34.61H486.17l23.68-62.13-21-59.29h43.7L541.82,592h1.42l10.32-34.81h38.85l-19.22,59.5,22.46,61.92h-42.9Z" transform="translate(-82.13 -472.67)"/>
      <path class="a" d="M664.65,678.65H624.58v-89h-26.3V557.23H693v32.38H664.65Z" transform="translate(-82.13 -472.67)"/>
    </g>

    <path class="a" d="M208.52,472.67,106.81,502.89,82.13,606.09l77,73,101.71-30.22,24.69-103.2Zm19.36,144.92-58.15,17.28-44-41.73,14.12-59L198,516.86l44,41.73Z" transform="translate(-82.13 -472.67)"/>
</svg>

uj5u.com熱心網友回復：

加載兩個徽標（一個帶有文本，一個沒有），并根據類的存在向其中一個添加 display: none 可能要簡單得多。與可見性不同，這會將其從頁面中洗掉：隱藏

<div class="hide-text container-div">
    <svg class="logo-text"></svg>
    <svg class="logo-no-text"></svg>
</div>

<style>
    .container-div:not(.hide-text) > .logo-no-text {
        display: none;
    }
    .container-div:not(.hide-text) > .logo-text {
        display: block;
    }
    .container-div.hide-text > .logo-text {
        display: none;
    }
    .container-div.hide-text > .logo-no-text {
        display: block;
    }
</style>

uj5u.com熱心網友回復：

如果您知道 SVG 的寬度/高度，您可以使用負邊距隱藏部分 SVG。在示例中，我有兩個具有相同內容的 SVG 元素，但最后一個元素具有類名.hide-text。

因此，如果您知道需要切斷的尺寸和部分，您可以使用此技術。

svg {
  width: 300px;
}

.hide-text {
  margin: 0 0 -50px;
}

.hide-text rect:nth-child(2) {
  display: none;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">
  <rect width="100%" height="50%" fill="navy"/>
  <rect width="100%" height="50%" fill="orange" transform="translate(0 100)"/>
</svg>
<div>Text</div>
<hr/>
<svg class="hide-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 200">
  <rect width="100%" height="50%" fill="navy"/>
  <rect width="100%" height="50%" fill="orange" transform="translate(0 100)"/>
</svg>
<div>Text</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/400993.html

標籤：css svg

上一篇：僅使用html和css還是使用svg進行檔案布局？

下一篇：androidstudio更改svg檔案