Блог

Главная - Вопросы по программированию - SVG-путь изменяется при применении CSS-преобразований

SVG-путь изменяется при применении CSS-преобразований

#svg #css-transforms #stroke

Вопрос:

Цель

Включите некоторые значки SVG в HTML с помощью svg тега -. Добавьте простые CSS :hover -эффекты, используя transform свойство -, в основном для поворота и/или перевода отдельных элементов внутри svg элемента -.

Проблема

Как только свойство transform -применяется к элементу внутри svg , элемент сжимается или растягивается. Это происходит как с line -элементами, так и с path -элементами.

Что я пытался

Я попытался поиграть с HTML-атрибутами , такими как viewbox , preserveAspectRatio или vector-effect , но, казалось, ничего не изменилось.

Мой текущий HTML-код:

 <svg class="icon" width="13.2px" height="13.2px" viewBox="0 0 13.2 13.2" preserveAspectRatio="xMidYMid">
<path class="line line-1 st0" d="M12.3,6.5c0,0.6-0.5,1.3-1.2,1.3h-9c-0.7,0-1.2-0.6-1.2-1.3s0.5-1.2,1.2-1.2h9C11.8,5.3,12.3,5.9,12.3,6.5z" vector-effect="non-scaling-stroke"/>
<path class="line line-2 st1" d="M6.6,12.3c-0.7,0-1.2-0.6-1.2-1.2v-9c0-0.7,0.6-1.2,1.2-1.2c0.6,0,1.2,0.6,1.2,1.2v9C7.9,11.7,7.3,12.3,6.6,12.3z" vector-effect="non-scaling-stroke"/>
</svg>

Скриншоты

  • Слева: По умолчанию, код, как указано выше.
  • Справа: Тот же HTML-код, .line-2 применен следующий CSS: transform: translateX(0) . Вы можете ясно видеть, что оба пути были сжаты, даже в этом примере, где ни один из элементов фактически не преобразован.

Скриншот, найденный здесь

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

1. преобразование: translateX(0) этого не сделает. Я полагаю, что есть что-то еще. Попробуйте удалить vector-effect="non-scaling-stroke" , если это не то, что вам нужно, пожалуйста, отредактируйте свой вопрос и добавьте преобразованный путь для сравнения

Ответ №1:

Я действительно не понимаю, чего вы пытаетесь достичь, но, как вы упомянули, onhover возможно, это ответит на ваш вопрос или даст вам новую отправную точку с новым видением.

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -5 78 75">
        <path fill="#000" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
        <animate fill="freeze" dur="0.1s" to="#f00" from="#000" attributeName="fill" begin="mouseover"/>
        <animate fill="freeze" dur="0.1s" to="#000" from="#4e86b1" attributeName="fill" begin="mouseout"/>
        <animateTransform attributeName="transform" type="rotate" from="0 34 16.5" to="15 34 16.5" dur="0.6s" repeatCount="1" begin="mouseover"/>
        </path>
    </svg>

Или что-то в этом роде:

     rect:hover {
    fill-opacity:0.5;
    stroke-width:10px;
    }

    circle {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    stroke-linecap: butt;
    -webkit-transition: all 2s ease-out;
    -moz-transition: all 2s ease-out;
    -ms-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
    }
circle:hover {
    fill: #2900b4;
    stroke-color:#b42900;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 5;
    } 
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <title>sin título</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.24.1" />
    </head>
    <body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="100px" viewBox="0 0 700 100">

    <a xlink:href="linkandhover.html">
        <circle cx="100" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />

    </a>

    <a xlink:href="linkandhover.html" xlink:show="new">
        <circle cx="170" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />

    </a>

    <a xlink:href="linkandhover.html" xlink:show="replace">
        <circle cx="240" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />

    </a>

    <a xlink:href="linkandhovertext.html" xlink:title="The alt attribute"target="_blank">
        <circle cx="310" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />
    <desc>The alt attribute</desc>
    </a>

    <a xlink:href="linkandhovertext.html" xlink:title="The title attribute" target="_top">
        <circle cx="390" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />

    </a>
    <defs>
    <linearGradient id="badgeGradient">
    <stop offset="0"/>
    <stop offset="1"/>
    </linearGradient>
    </defs>

    <g id="heading">
     <a xlink:href= "linkandhovertext.html" xlink:title="svg element and two text elements in the same link">
    <circle cx="470" cy="40" r="30" stroke="#ffaa00" stroke-width="3"        fill="#b42900" />
    <text id="title1" x="555" y="55" fill="#b42900">SIMBIOSIS</text>
                <text id="title" x="510" y="40" fill="#2900b4">We are</text>
    </a>
    <a xlink:href= "linkandhovertext.html" xlink:title="using style sheets">
    <rect
         width="30"
         height="30"
         x="30"
         y="30"
         style="fill:#2900b4;stroke:#00ff00;fill-opacity:1;"/>  </a>
    </g>
    </svg>
    </svg>
    </body>
    </html>

Надеюсь, я вам чем — нибудь помог:

Метки: