Блог

Главная - Вопросы по программированию - Как наносить штрихи на границы элемента SVG

Как наносить штрихи на границы элемента SVG

#html #css #svg

Вопрос:

У меня есть простой элемент 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>

Комментарии:

1. Вопрос не ясен … Вам просто нужно заменить красный цвет границы при наведении курсора?

2. @s.кузнецов на самом деле нет, я хочу, чтобы белые штрихи анимировались над границей, когда кнопка зависла. в настоящее время белые штрихи анимируются вокруг изображения и текста вместо этого

3. Вместо того, чтобы применять его к элементу svg, попробуйте svg:hover #briefcase1 { transition: 1s ease-in-out; stroke-dashoffset: -480; }

4. @enxaneta спасибо, но это не сработает. он будет применять переходы только к границам изображения. Мне нужно, чтобы они были на красной границе

Ответ №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>
Метки: