应用 CSS 变换时 SVG 路径发生变化答案

【问题标题】：SVG Path changes when applying CSS Transforms应用 CSS 变换时 SVG 路径发生变化
【发布时间】：2021-08-17 02:51:10
【问题描述】：

目标

使用svg-标签将一些 SVG 图标合并到 HTML 中。使用transform-属性添加简单的CSS :hover-效果，主要用于旋转和/或平移svg-元素内的单个元素。

问题

一旦transform-Property 应用于svg 内的元素，该元素就会被挤压或拉伸。 line-elements 和 path-elements 都会发生这种情况。

我尝试了什么

我尝试使用 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)。您可以清楚地看到两条路径都被压扁了，即使在此示例中实际上没有任何元素被转换。

Screenshot found here

【问题讨论】：

transform: translateX(0) 不会这样做。我想还有别的东西。尝试删除 vector-effect="non-scaling-stroke" 如果这不是您需要的，请编辑您的问题并添加转换后的路径以进行比较

标签： svg css-transforms 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>

希望对我有所帮助：

【讨论】：