大佬教程收集整理的这篇文章主要介绍了在 svg 插图中转换 css 属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我第一次尝试使用 CSS 为 svg 制作的插图制作动画，但遇到了一个我不知道如何解决的问题。
当我尝试将 CSS 变换属性应用于路径，特别是下臂 (Shape-33) 时，该路径消失了。我不太明白而且我肯定遗漏了一些东西，如果我将此转换属性应用于父 svg 标签，它确实适用。
有人知道我做错了什么吗？
谢谢
<!DOCTYPE HTML>
<HTML lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0">
<@R_944_10283@e>Ilustration</@R_944_10283@e>
<style>
#Shape-33{ transform: rotate(-13deg);}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" wIDth="1074.145" height="883.935" vIEwBox="0 0 1074.145 883.935">
<g ID="Grupo_1480" data-name="Grupo 1480" transform="translate(-323.234 -966.369)">
<path ID="Shape" d="M2509.73,516.99a17.944,17.944,1,17.944-17.943,17.943,0-17.944,17.943" transform="translate(-1856.566 929.905)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-2" data-name="Shape" d="M2555.161,464.243A17.945,17.945,2573.1,446.3a17.944,17.944" transform="translate(-1856.415 929.73)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-3" data-name="Shape" d="M2467.631,464.243a17.944,17.944-17.944,17.944" transform="translate(-1856.706 929.73)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-4" data-name="Shape" d="M2638.783,692.988c-5.5-4.194-32.286-11.089-79.558-11.089s-74.055,6.895-79.561,11.089c5.5,4.2,32.289,11.09,79.561,11.09s74.055-6.894,79.558-11.09m-79.558,21.694c-23.164,0-44.991-1.737-61.46-4.9-20.3-3.89-29.348-9.071-29.348-16.8s9.05-12.9,29.346-16.8c16.471-3.156,38.3-4.893,61.462-4.893s44.991,1.738,61.464,4.893c20.294,3.894,29.344,9.072,16.8s-9.05,12.909-29.346,16.8c-16.471,3.158-38.3,4.9-61.462,4.9" transform="translate(-1856.704 930.479)" fill="#a55c72" fill-rule="evenodd"/>
<path ID="Shape-5" data-name="Shape" d="M2455.335,877.068c-.144-.01-.294-.018-.437-.03a7.424,7.424,1-6.727-8.061l36.444-404.2a7.423,7.423,14.787,1.332l-36.444,404.2a7.433,7.433,1-7.624,6.757" transform="translate(-1856.771 929.769)" fill="#a55c72" fill-rule="evenodd"/>
<path ID="Shape-6" data-name="Shape" d="M2540.522,798.807l5.119,76.886h22.3l3.6-76.886Z" transform="translate(-1856.463 930.904)" fill="#f7c7b5" fill-rule="evenodd"/>
<path ID="Shape-7" data-name="Shape" d="M2664.381,877.543a7.425,7.425,1-7.383-6.728l-38-405.148a7.423,14.781-1.388l38,405.148a7.418,7.418,1-6.694,8.083c-.235.023-.469.033-.7.033" transform="translate(-1856.202 929.767)" fill="#a55c72" fill-rule="evenodd"/>
<path ID="Shape-8" data-name="Shape" d="M2454.607,463.464c0-18.211,45.6-32.974,101.844-32.974s101.839,14.762,101.839,32.974-45.59,32.975-101.839,32.975-101.844-14.762-101.844-32.975" transform="translate(-1856.75 929.677)" fill="#a55c72" fill-rule="evenodd"/>
<path ID="Shape-9" data-name="Shape" d="M2644.186,678.2,2690.8,647l-22.072-25.055L2632.7,662.413Z" transform="translate(-1856.156 930.315)" fill="#f7c7b5" fill-rule="evenodd"/>
<path ID="Shape-10" data-name="Shape" d="M2545.625,875.438c2.059,16.136,11.35,33.023,28.465,41.876,2.9,1.5,6.858,2.719,9.547.966,7.264-4.731-13.46-37.321-15.715-42.842Z" transform="translate(-1856.447 931.159)" fill="#353d59" fill-rule="evenodd"/>
<path ID="Shape-11" data-name="Shape" d="M2632.733,662.278c-4.875,2.1-9.5,5.046-8.644,10.838,4.4,29.827,31.464,54,37.36,49.8s-15.227-38.163-17.234-44.852l-11.482-15.786" transform="translate(-1856.186 930.449)" fill="#353d59" fill-rule="evenodd"/>
<path ID="Shape-12" data-name="Shape" d="M2433.54,393.177c3.2,103.12,65.252,178.737,87.916,287.977,5.042,24.3,11.961,114.071,15.709,166.553H2582.3s19.391-126.043,16.24-171.815c-5.388-78.253-29.254-211.807-29.254-211.807s106.341,43.984,159.757,71.584c-27.957,37.686-51.519,72.513-77.885,107.57l37.321,35.77c35.792-28.123,121.338-85.394,133.621-130.215,26.844-97.987-161.071-156.206-199.19-170.2L2433.54,393.177" transform="translate(-1856.82 929.504)" fill="#0f206c" fill-rule="evenodd"/>
<path ID="Shape-13" data-name="Shape" d="M2440.467,435a2.12,2.12,1-.09-4.238c19.328-.834,38.009-13.89,45.427-31.752a2.122,2.122,3.919,1.627,56.776,1-49.164,34.361c-.03,0-.061,0-.092,0" transform="translate(-1856.804 929.568)" fill="#161721" fill-rule="evenodd"/>
<path ID="Shape-14" data-name="Shape" d="M2596.815,445.335a2.118,2.118,1-2.106-1.884,133.823,0-14.216-46.789,3.764-1.951,137.96,14.666,48.268,2.117,1-1.869,2.344,2.392,1-.239.012" transform="translate(-1856.331 929.554)" fill="#161721" fill-rule="evenodd"/>
<path ID="Shape-15" data-name="Shape" d="M2581.877,453.751a2.122,1-2.1-1.839,113.829,0-19.054-49.242,2.123,3.494-2.412,118.125,19.763,51.089,2.119,1-1.814,2.387,2.357,1-.288.018" transform="translate(-1856.397 929.573)" fill="#161721" fill-rule="evenodd"/>
<path ID="Shape-16" data-name="Shape" d="M2568.186,462.915a2.122,1-1.409-3.707,92.113,40.708-20.855,.932,4.141,87.8,0-38.824,19.888,2.128,1-1.407.534" transform="translate(-1856.379 929.703)" fill="#161721" fill-rule="evenodd"/>
<path ID="Shape-17" data-name="Shape" d="M2547.3,61.1c-6.17,28.277-16.476,67.837-22.649,96.114a128.471,128.471,36.357,9.8c2.939-10.622,6.742-20.7,9.684-31.323l18.112-11.2c.646-8.519,3.358-16.722,5.146-25.075s2.591-17.285-.477-25.258-10.926-14.6-19.441-13.866c-8.937.773-17.792,1.552-26.733.814" transform="translate(-1856.516 928.444)" fill="#f7c7b5" fill-rule="evenodd"/>
<path ID="Shape-18" data-name="Shape" d="M2534.823,65.6a20.737,20.737,0-1.878,11.441,62.276,2.522,11.458L2542.974,90c-1.32,11.579-2.638,23.322-.887,34.844s6.975,23,16.417,29.833,23.519,7.823,32.467.351a23.727,23.727,7.556-22.94,26.481,0-16.04-18.4,31.166,0-25.075,1.625c-2.569-5.07-2.188-11.137-.917-16.675s3.347-10.907,4.03-16.548-1.207-12.324-5.219-16.351a37.468,37.468,29.888.513,21.954,8.293-5.653,12.267,3.12-9.327c-.6-4.661-4.448-8.3-8.644-10.422A26.972,26.972,2549.9,57.461c-5.889-.31-12.354,2.909-15.076,8.143" transform="translate(-1856.489 928.369)" fill="#403f3f" fill-rule="evenodd"/>
<path ID="Shape-19" data-name="Shape" d="M2526.793,94.144a12.06,12.06,3.379,9.525,12.339,7.386,3.857l5.437-17.69c-1.488-3.144-6.716-4.421-10.041-3.4a9.277,9.277,0-6.16,7.712" transform="translate(-1856.51 928.53)" fill="#f7c7b5" fill-rule="evenodd"/>
<path ID="Shape-20" data-name="Shape" d="M2563.3,96.1a2.829,2.829,2.829-2.828A2.829,2563.3,96.1" transform="translate(-1856.388 928.554)" fill="#353d59" fill-rule="evenodd"/>
<path ID="Shape-21" data-name="Shape" d="M2584.256,98.919a2.828,2.828,2.828-2.828,0-2.828,2.828" transform="translate(-1856.318 928.563)" fill="#353d59" fill-rule="evenodd"/>
<path ID="Shape-22" data-name="Shape" d="M2580.438,114.33a32.113,32.113,1-6-.823,1.064,1-.792-1.273,1.048,1.274-.791,31.38,5.136.758l-1.893-14.046a1.058,1.058,.905-1.195,1.026,1.192.907l2.2,16.292-1.075.123a9.118,9.118,1-.953.047" transform="translate(-1856.353 924.674)" fill="#e0a797" fill-rule="evenodd"/>
<path ID="Shape-23" data-name="Shape" d="M2593.7,91.045a1.059,1.059,1-.813-.378,8.542,0-1@R_893_9445@-1.219,1.063,1-1.3-1.684,10.753,14.265,1.536,1.062,1-.813,1.745" transform="translate(-1856.333 928.529)" fill="#403f3f" fill-rule="evenodd"/>
<path ID="Shape-24" data-name="Shape" d="M2574.357,89.875a1.055,1.055,1-.817-.384,9.263,0-11.507-1.908,1-1.115-1.807,11.311,14.253,2.363,1-.814,1.737" transform="translate(-1856.397 928.523)" fill="#403f3f" fill-rule="evenodd"/>
<path ID="Shape-25" data-name="Shape" d="M2532.041,100.62a1.059,1-.214-2.1l4.628-.967-4.642-4.108a1.061,1.061,1.4-1.592l7.818,6.911-8.776,1.831a1.034,1.034,1-.218.022" transform="translate(-1856.495 928.548)" fill="#e0a797" fill-rule="evenodd"/>
<path ID="Shape-26" data-name="Shape" d="M2567.683,122a2.124,2.124,0-.392,2.976,12.261,9.274,4.738l.339,0a12.325,12.325,9.194-4.2,.51-1.541,2.1,0-.728-1.449,2.145,0-1.545-.514,0-1.448.728,7.9,1-12.232-.355,2.136,0-2.972-.389" transform="translate(-1856.376 928.648)" fill="#e0a797" fill-rule="evenodd"/>
<path ID="Shape-27" data-name="Shape" d="M2511.282,212.464c22.066,7.356,69.806,3.528,63.113-27.277-24.732-15.666-31.82-19.864-34.115-21.721-20.486-16.581-34.95-6.321-34.95-6.321s-32.165,0-69.689,21.436c-3.61,20.178,47.906,25.124,75.642,33.882" transform="translate(-1856.814 928.756)" fill="#f7c7b5" fill-rule="evenodd"/>
<path ID="Shape-28" data-name="Shape" d="M2496.4,346a17.944,17.944-17.944A17.945,2496.4,346" transform="translate(-1856.61 929.336)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-29" data-name="Shape" d="M2538.5,304.208a17.933,17.933,34.171,7.619c.555-2.8,1.113-5.661,1.671-8.548a17.933,0-35.842.929" transform="translate(-1856.47 929.196)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-30" data-name="Shape" d="M2450.965,304.208a17.944,17.944" transform="translate(-1856.762 929.196)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-31" data-name="Shape" d="M2535.161,220.631a17.945,17.944" transform="translate(-1856.481 928.918)" fill="#141f49" fill-rule="evenodd"/>
<path ID="Shape-32" data-name="Shape" d="M2350.771,329.594c-2.891,20.133-.563,41.517,9.679,59.089,17.084-3.551,26.358-23.372,33.322-39.371a589.084,589.084,54.38-98.119c14.787-29.737,2.944-79.576-12.228-72.692-32.652,27.814-56.063,74.124-65.556,93.571-8.921,18.279-16.7,37.389-19.6,57.522" transform="translate(-1830.467 924.835)" fill="#f7c7b5" fill-rule="evenodd"/>
<rect ID="Rectángulo_637" data-name="Rectángulo 637" wIDth="262.657" height="243.809" transform="translate(826.657 1326.565) rotate(-180)" fill="#f0f7fc"/>
<path ID="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" transform="matrix(0.848,0.53,-0.53,0.848,-1272.383,-279.81)" fill="red" fill-rule="evenodd"/>
<path ID="Shape-34" data-name="Shape" d="M2180.9,669.8a68.115,68.115,28.376,39.5,71.829,48.411,10.553c-5.59-16.639-14.022-32.484-28.861-41.467s-29.958-10.963-47.925-8.582" transform="translate(-1857.662 930.471)" transform="scale(2)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-35" data-name="Shape" d="M2183.712,541.025c-14.281,87.124,42.324,112.878,72.529,116.634,9.567-69.949-50.9-110.87-72.529-116.634" transform="translate(-1857.66 930.045)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-36" data-name="Shape" d="M2303.669,496c-32.088,46.844-34.08,89.31-8.589,136.035,56.2-43.044,28.6-117.3,8.589-136.035" transform="translate(-1857.34 929.895)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-37" data-name="Shape" d="M2428.8,641.242a80.783,80.783,0-48.858,28.683,81.691,0-17.782,54.021c18.073-2.36,33.257-11.731,44.849-25.822s22.868-38.588,21.792-56.883" transform="translate(-1857.058 930.379)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-38" data-name="Shape" d="M2418.007,547.559c-31.537,5.982-62.219,35.624-71.189,58.232s-7.557,47.387-6.075,71.7c26.656-7.449,50.077-24.685,60.847-43.786s27.1-65.264,16.417-86.146" transform="translate(-1857.133 930.067)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-39" data-name="Shape" d="M2299.328,697.775a2.446,2.446,3.45.237c11.428,13.113,20.9,37.132,25.381,60.262a2.446,1-4.8.93c-4.334-22.36-13.511-45.638-24.266-57.979A2.445,2.445,2299.328,697.775Z" transform="translate(-1857.27 930.565)" fill="#386795" fill-rule="evenodd"/>
<path ID="Shape-40" data-name="Shape" d="M2401.18,671.579a2.446,3.149,3.742c-20.562,17.307-46.7,54.651-62.516,84.322a2.445,1-4.315-2.3C2353.586,727.165,2380.029,689.383,2401.18,671.579Z" transform="translate(-1857.141 930.478)" fill="#386795" fill-rule="evenodd"/>
<path ID="Shape-41" data-name="Shape" d="M2395.881,577.226a2.446,3.572,3.342c-49.757,53.187-66.941,116.839-60.241,183.315a2.445,1-4.866.491C2327.513,696.586,2345.075,631.535,2395.881,577.226Z" transform="translate(-1857.155 930.163)" fill="#386795" fill-rule="evenodd"/>
<path ID="Shape-42" data-name="Shape" d="M2202.329,582.458a2.445,3.413.557l82.028,114.018a2.445,1-3.97,2.855l-82.027-114.017A2.444,2.444,2202.329,582.458Z" transform="translate(-1857.593 930.182)" fill="#386795" fill-rule="evenodd"/>
<path ID="Shape-43" data-name="Shape" d="M2303.339,545.12a2.446,2.469,2.422c.223,22.513-1.4,42.507-5.264,67.042l-3.72,23.017c-8.72,54.716-11.445,85.125-8.78,118.894l.21,2.539.98,11.349-5.552-9.946a182.9,182.9,0-60.687-64.752,2.635-4.121,187.243,56.486,56.736l.528.836-.06-1.185c-1.614-31.281,1.475-61.616,9.719-113.051l2.975-18.353c4.135-25.542,5.869-45.905,5.641-68.957A2.446,2303.339,545.12Z" transform="translate(-1857.525 930.059)" fill="#386795" fill-rule="evenodd"/>
<path ID="Shape-44" data-name="Shape" d="M2234.748,753.238c-34.874,148.957,194.489,150.449,157.141,0Z" transform="translate(-1857.494 930.752)" fill="#f0a95c" fill-rule="evenodd"/>
<path ID="Shape-45" data-name="Shape" d="M2273.258,651.07a47.357,47.357,4.543,37.814c6.768,11.641,18.618,21.235,32.954,26.681,3.03-13.347,3.5-27.321-4.05-39.327s-18.427-19.459-33.447-25.169" transform="translate(-1857.361 930.412)" fill="#4c7bb1" fill-rule="evenodd"/>
<path ID="Shape-46" data-name="Shape" d="M2231.277,777.609H2395.75c-.113-1.769-.254-3.554-.453-5.373H2231.632c-.166,1.819-.274,3.6-.355,5.373" transform="translate(-1857.494 930.815)" fill="#f6c561" fill-rule="evenodd"/>
<path ID="Shape-47" data-name="Shape" d="M2698.244,394.2c-27.4-8.372-34.823-102.043-37.445-123.258-1.8-14.491-3.429-29.964,3.087-43.031,2.611-5.227,6.539-10.157,6.729-15.994.25-7.641-3.355-20.523-.807-22.13S2679,206.56,2679,206.56s-5.717-23.622-3.291-24.616,8.98,16.871,16.871-3.446-16.875-2.319-18.752,8.9,11.4,10.084,19.209a25.821,25.821,1-6.459,21.4,526.634,21.266,69.219c6.946,18.072,15,36.235,15.887,55.577s-7.324,40.609-24.9,48.73" transform="translate(-1851.068 928.842)" fill="#f7c7b5" fill-rule="evenodd"/>
</g>
</svg>
</body>
</HTML>
SVG 中的许多元素已经应用了 transform。这包括您尝试旋转的手臂 <path>。当你给它一个新的转换时，你正在替换它已经拥有的转换。这意味着路径最终在 SVG 中完全不同的地方，并且被旋转。
您需要知道的另一件事是 SVG 的默认原点位于左上角 (0,0)。因此，仅应用旋转本身，将围绕 SVG 的左上角旋转形状。不是肘关节或靠近手臂的任何地方。
为了更好地控制旋转，您需要在 CSS 中提供变换原点。
#Shape-33 {
transform-origin: {elbowX}px {elbowY}px;
transform: rotate(-13deg);
}
其中 {elbowX} 和 {elbowY} 是您要旋转手臂的点的坐标。也称为“旋转中心”。找出那个点应该是什么，然后在下面的解决方案中替换这两个值。
请记住，您的问题有几种不同的解决方案。
将要转换的路径包装在一个组 (<g>) 元素中。然后对其应用转换。这样它已经拥有的转换将保持不变。
<g class="arm">
<path id="Shape-33" data-name="Shape" d="M2481.282,273.375c-8.722-.127-87.369,58.622-107.033,78.377-4.988,5.012-10.065,10.147-13.157,16.5s-3.905,14.27-.291,20.346c4.437,7.461,14.442,10.119,22.925,8.28s15.711-7.259,22.261-12.958c13.874-12.071,24.133-26.91,36.914-39.89,14.112-14.336,28.331-28.576,42.459-42.9,28.6,2.451,28.888.206s-22.99-7.1-22.99-7.1,24.393,2.848,24.552.383-20.259-8.5-20.259-8.5,22.654,4.662,23.471,2.29-22.2-8.147-22.2-8.147,20.435,2.251,20.708-.48-26.571-6.263-36.251-6.4" transform="matrix(0.848,0.53,-0.53,0.848,-1272.383,-279.81)" fill="red" fill-rule="evenodd"/>
</g>
.arm {
transform-origin: {elbowX}px {elbowY}>px;
transform: rotate(-13deg);
}
但请注意，transform 上的 <path> 将在 对其父组进行轮换之后应用。所以，特别是对于轮换，这会有点尴尬。所以最好将路径变换移动到组，并将旋转放在路径上。 IE。交换变换。
<g transform="matrix(0.848,-279.81)">
<path class="arm" id="Shape-33" data-name="Shape" d="M2481.282,20.708-.48-26.571-6.263-36.251-6.4" fill="red" fill-rule="evenodd"/>
</g>
.arm {
transform-origin: {elbowX}px {elbowY}>px;
transform: rotate(-13deg);
}
将现有转换包含到新转换中
#Shape-33 {
transform: matrix(0.848,-279.81) rotate(-13deg);
}
但由于上面讨论的起源问题，事情不会这么简单。因为您正在组合转换，所以如果您使用 transform-origin，如解决方案 #1 中那样，它将影响两个转换元素。可能会导致您不想要的转换。原点更改需要仅应用于变换的旋转部分。
您需要做的是将原点调整计算注入变换本身。
#Shape-33 {
transform: matrix(0.848,-279.81) translate({elbowX},{elbowY}) rotate(-13deg) translate(-{elbowX},-{elbowY});
}
我们在这里做的是：
如果您打算为 SVG 中的许多元素设置动画，那么通过将现有变换应用于形状来移除现有变换可能会更清晰。我的意思是将路径中的点乘以矩阵，这样就不再需要变换了。
Here's a question that should Help with that
不幸的是，您必须进行许多 svg 转换：一个在形状上，另一个在包装组上。为了能够旋转红手，我会将它与放置在转换包装组外部的未转换 use 元素一起使用。一个 use 元素可以采用 x 和 y 属性，从而可以轻松地将其放置在您需要的任何位置。然后就可以用css变换形状了。
在下一个示例中，我将保留原始形状（默认黑色填充），但您可以将其隐藏在 <defs>
为了知道 use 元素的 x 和 y 属性的值，我计算了 shape-33 和包裹 Grupo_1480 的组的边界框（getBBox() 方法），并得到了它们之间的差异两者的 x 和 y 相同。
此外：在 css 中，您需要设置转换的原点。我用蓝色圆圈标记了这一点。您可以删除该圈子。
#red {
transform-origin: 220px 335px;
transform: rotate(10deg);
}<svg viewBox="150 270 300 300">
<g id="Grupo_1480" data-name="Grupo 1480" transform="translate(-323.234 -966.369)">
<path id="Shape-33" data-name="Shape" d="M2481.282,-279.81)" fill-rule="evenodd"/>
</g>
<use id="red" x="-323.23" y="-966.37" xlink:href="#Shape-33" fill="red"/>
<circle fill="blue" cx="220" cy="335" r="5"/>
</svg>以上是大佬教程为你收集整理的在 svg 插图中转换 css 属性全部内容，希望文章能够帮你解决在 svg 插图中转换 css 属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。