如何使用 css 剪切部分 SVG？

Question

我有一个 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 class 时，我想从 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 元素仍在使用 space！
（d 仅适用于 Chrome，这并不好）

如何使用 CSS 删除一些路径？

更新

这里有一张示例图片来澄清问题：

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

Answer 1

加载两个徽标（一个有文字，一个没有），并根据 class 的存在向其中一个添加显示：none 可能会简单得多。与 visibility: hidden

不同，这会将其从页面中删除

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

Answer 2

如果您知道 SVG 的 width/height，您可以使用负边距隐藏部分 SVG。在示例中，我有两个内容相同的 SVG 元素，除了最后一个具有 class 名称 .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>

Answer 3

这是一种方法。

首先，我们将 SVG 更改为 preserveAspectRatio="xMinYMid slice"。简单来说，这告诉浏览器如果我们减小 SVG 的宽度，则保持 SVG 的左侧可见。

然后我们需要做的就是隐藏文本，并将宽度和高度设置为将导致SVG的文本部分被截断的值。一个广场似乎工作。参见 class .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>

如何使用 css 剪切部分 SVG？

How to cut part of SVG with css?

css

svg

更新