如何用 css 剪切 SVG 的一部分？答案

【问题标题】：How to cut part of SVG with css?如何用 css 剪切 SVG 的一部分？
【发布时间】：2022-01-01 03:06:50
【问题描述】：

我在 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 删除一些路径？

更新

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

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

【问题讨论】：

不太清楚您想要实现什么。您想隐藏.hide-text 父 AND 和其中的文本吗？请解释一下。
@azu 当父 SVG 元素具有 .hide-text 类时，我想隐藏塑造文本的路径（路径 3~10 加上最后一个）。
实现这一点的理想方法是修改viewBox，但不幸的是，viewBox 不是可样式化的属性。可以通过调整width、height 和preserveAspectRatio 来实现。但这取决于您的徽标设计和页面布局。如果没有看到其中任何一个，我们就无能为力了。考虑使用minimal reproducible example 更新您的问题。
@PaulLeBeau 我添加了一个示例图像。

标签： css svg

【解决方案1】：

这是一种方法。

首先，我们将 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>

【讨论】：

谢谢！我刚刚记得 SVG 中的 <g>！

【解决方案2】：

加载两个徽标（一个带文本，一个不带）可能会简单得多，并根据类的存在向其中一个添加 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>

【讨论】：

我就是这样做的。两个display: block; 规则不是必需的。
我更喜欢 <g> 而不是两个单独的 <svg>s（就像接受的答案中的那个），但感谢您的意见！

【解决方案3】：

如果您知道 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>

【讨论】：