如何将描边应用到 SVG 元素的边框答案

【问题标题】：How to apply strokes to the borders of a SVG element如何将描边应用到 SVG 元素的边框
【发布时间】：2021-03-28 06:09:31
【问题描述】：

我有一个简单的 SVG 元素，其中包含图像和文本，但我想在元素悬停时在 SVG 元素的边框上应用笔划。但相反，笔划被应用于包含图像的其余部分以及 SVG 中的文本元素。

<style>
   svg{
       outline: none;
       border: 1px solid red;
       position: absolute;
       background: transparent;
       cursor: pointer;
  left: 0;
  top: 0;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 150 480;
  stroke-dashoffset: 150;
  transition: 1s ease-in-out;
  
   }    

   svg:hover {
  transition: 1s ease-in-out;
  background: #4F95DA;
  stroke-dashoffset: -480;
}
</style>

<svg width="287" height="131" viewBox="0 0 287 131" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Menu2">
<rect id="briefcase 1" x="118" y="22" width="51" height="51" fill="url(#pattern0)"/>
<text id="label1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="84" y="107.652">Create Account</tspan></text>
</g>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.002)"/>
</pattern>
<image id="image0" data-name="briefcase.png" width="500" height="500" xlink:href="briefcase.png"/>
</defs>
</svg>

【问题讨论】：

问题不太清楚...悬停时只需要更换红色边框颜色吗？
@s.kuznetsov 不是真的，当按钮悬停时，我希望白色笔触在边框上设置动画。目前，白色笔画围绕图像和文本进行动画处理
不要将其应用于 svg 元素，请尝试 svg:hover #briefcase1 { transition: 1s ease-in-out; stroke-dashoffset: -480; }
@enxaneta 谢谢，但这行不通。它只会在图像的边界上应用过渡。我需要它们在红色边框上

标签： html css svg

【解决方案1】：

我通过简单地在 SVG 的边框上绘制线条然后在线条上应用笔触来解决这个问题。

<style>
    svg{
        outline: none;
        /* border: 1px solid red; */
        position: absolute;
        background: transparent;
        cursor: pointer;
   left: 10;
   top: 0;
   fill: none;       
   stroke-dasharray: 150 480;
   stroke-dashoffset: 150;
   transition: 0.7s ease-in-out;
    }    

    .lines{
        stroke: black;
    }
 
    svg:hover {
   transition: 0.7s ease-in-out;
   background: #ddd;;
   stroke-dashoffset: -480;
 }
 </style>


<svg width="287" height="131" viewBox="0 0 287 131" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Menu2" clip-path="url(#clip0)">
    <rect id="briefcase 1" x="118" y="22" width="51" height="51" fill="url(#pattern0)"/>
    <text id="label1" fill="black" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="18" font-weight="bold" letter-spacing="0em"><tspan x="84" y="107.652">Create Account</tspan></text>
    <line id="Line1" class="lines" x1="0.5" x2="0.5" y1="0.5" y2="131"/>
    <line id="Line2" class="lines" x1="0.5" x2="286"  y1="0.5"  y2="0.5"/>
    <line id="Line3" class="lines" y1="130" x1="0.5" x2="286" y2="130"/>
    <line id="Line4" class="lines" x1="286" x2="286" y1="0.5" y2="130" />
    </g>
    <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
    <use xlink:href="#image0" transform="scale(0.002)"/>
    </pattern>
    <clipPath id="clip0">
    <rect width="286.55" height="131" fill="white"/>
    </clipPath>
    <image id="image0" data-name="briefcase.png" width="500" height="500" xlink:href="briefcase.png"/>
    </defs>
    </svg>

【讨论】：