在 css 中设置矢量本身而不是整个 SVG答案

【问题标题】：Styling a vector itself instead of the whole SVG in css在 css 中设置矢量本身而不是整个 SVG
【发布时间】：2019-12-11 06:12:17
【问题描述】：

我有一个看起来像箭头的 svg，问题是当我在 css 中设置 svg 的样式时，它会设置整个 svg（周围的框）而不是 svg 本身（箭头）的样式。例如，如果我插入以下内容：

background: #FFFFFF;
border: 1px solid #DADADA;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

它将为箭头周围的框设置样式并给我这个：

而不是这个：

这是我的 svg 代码：

<svg class="vector-one" width="96" height="153" viewBox="0 0 96 153" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_d)">
      <path d="M92 20.7143L37 72.5L92 124.286L81 145L4 72.5L81 0L92 20.7143Z" fill="white"/>
      </g>
      <defs>
      <filter id="filter0_d" x="0" y="0" width="96" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dy="4"/>
      <feGaussianBlur stdDeviation="2"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
      </filter>
      </defs>
    </svg>

    <svg class="vector-two" width="96" height="153" viewBox="0 0 96 153" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g filter="url(#filter0_d)">
      <path d="M4 124.286L59 72.5L4 20.7143L15 0L92 72.5L15 145L4 124.286Z" fill="white"/>
      </g>
      <defs>
      <filter id="filter0_d" x="0" y="0" width="96" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
      <feOffset dy="4"/>
      <feGaussianBlur stdDeviation="2"/>
      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
      </filter>
      </defs>
    </svg>

【问题讨论】：

SVG 本身只是一个（边界）框。它总是长方形的。由于您将 box-shadow 应用于元素，因此您将其应用于矩形（边界框）。

标签： html css svg

【解决方案1】：

您尚未包含所有 CSS，但我从您的屏幕截图中推断您没有深入到 SVG 树以定位必要的元素。我在下面包含了一些代码来说明我的意思，不仅是 SVG 级别，还包括 g -> path（大多数 SVG 代码有点不同，所以它总是取决于结构，但这就是你的结构）。

请注意，并非所有 CSS 属性都适用于 SVG。您可以在 the W3 SVG attributes page 阅读哪些适用的方法

/* Your CSS now (I'm inferring) */
svg.vector-one {
  background: #FFFFFF;
  border: 1px solid #DADADA;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* Example CSS to fill the arrow with green color */
svg.vector-two g path {
  fill: green;
}

<svg class="vector-one" width="96" height="153" viewBox="0 0 96 153" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d)">
  <path d="M92 20.7143L37 72.5L92 124.286L81 145L4 72.5L81 0L92 20.7143Z" fill="white"/>
  </g>
  <defs>
  <filter id="filter0_d" x="0" y="0" width="96" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dy="4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
  </filter>
  </defs>
</svg>

<svg class="vector-two" width="96" height="153" viewBox="0 0 96 153" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_d)">
  <path d="M4 124.286L59 72.5L4 20.7143L15 0L92 72.5L15 145L4 124.286Z" fill="white"/>
  </g>
  <defs>
  <filter id="filter0_d" x="0" y="0" width="96" height="153" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  <feOffset dy="4"/>
  <feGaussianBlur stdDeviation="2"/>
  <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
  </filter>
  </defs>
</svg>

【讨论】：