沒有css的SVG影片

我想創建一個像這樣圍繞這兩個形狀旋轉的影片。我想在沒有外部 CSS 的情況下在 SVG 中實作它。任何人都可以幫助我如何做到這一點？

這是我的代碼

<svg xmlns="http://www.w3.org/2000/svg" width="542" height="542" viewBox="0 0 542 542">
  <g id="svg" transform="translate(-655 -265)">
    <circle id="Ellipse_3" data-name="Ellipse 3" cx="271" cy="271" r="271" transform="translate(655 265)" fill="none"/>
    <path id="Path_1" data-name="Path 1" d="M818.25,412.875l.71.931c116.417,110.219-.023,204.664-.382,205.428-.045.089-.2.312-.375.672-2.758,5.713,3.239,3.015,3.594,2.858,147.217-64.969,210.869-212.39,210.672-213.249-.359-1.7-3.069-1.088-3.344-.781-4.366,4.893-81.574,88.727-207.317.617-.169-.118.317.2-.673-.473s-2.369-1.12-3.148-.181-.909,2.256.388,4.35" fill="none" stroke="#707070" stroke-width="1"/>
    <path id="Path_2" data-name="Path 2" d="M927.651,569.319s69.788,5.194,99.3,51.994c.017.04,4.351,6.826,5.406-.172a1.6,1.6,0,0,0,.069-.516,5.747,5.747,0,0,0-.21-2.031c-3.036-7.836-31.037-76.552-54.932-98.845-.009-.009-35.627,38.007-49.635,49.57" fill="none" stroke="#707070" stroke-width="1"/>
    <g id="Ellipse_1" data-name="Ellipse 1" transform="translate(655 496)" fill="#f90a2a" stroke="#000" stroke-width="1">
      <circle cx="34.5" cy="34.5" r="34.5" stroke="none"/>
      <circle cx="34.5" cy="34.5" r="34" fill="none"/>
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite"/>
    </g>
  </g>
</svg>

uj5u.com熱心網友回復：

如果您將檔案加載到矢量編輯器中，我們將看到形狀位于 SVG 畫布之外。

因此，您被迫使用變換命令將表單帶回自定義視口。

實用建議

有必要在矢量編輯器中繪制，以便形狀不會超出 SVG 畫布的邊界。

在矢量編輯器中重繪并清理檔案后：

• 要獲取段，請使用stroke-dasharray="251,1004",
  where 251- dash, 1004- gap
• 為了影片旋轉，除了角度之外，還需要額外指定旋轉中心的坐標

<animateTransform attributeName="transform" attributeType="XML" type="rotate"
 from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>  

.container {
width:75vw;
height:auto;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg5" width="50%"  height="50%" viewBox="0 0 542 542" >
 <defs>
   <linearGradient id="Lg" x1="0" x2="0" y1="1" y2="0">
      <stop offset="0" stop-color="#DC143C" />
        <stop offset="0.8" stop-color="white" stop-opacity="0.05" />
   </linearGradient>
 </defs>   
<g id="g820" transform="translate(-658 -238)" fill="none" stroke="#707070" stroke-width="1">    
   
    <path id="Path_1" fill="black" stroke="black" d="m818 413 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4" data-name="Path 1" />
    <path id="Path_2" fill="#DC143C" d="M928 569s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49" data-name="Path 2" />
</g> 
   <circle id="Ellipse_3" data-name="Ellipse 3" stroke="url(#Lg)" cx="266" cy="278" r="220" fill="none" stroke="#DC143C" stroke-width="45" stroke-dasharray="251,1004" stroke-linecap="round" >
       <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0,266,278" to="360,266,278" dur="4s" repeatCount="indefinite"/>  
   </circle>   
   
</svg>
</div>

uj5u.com熱心網友回復：

該實驗的 <sprite-meister>Web組件可以為您生成CSS

• 清理 SVG 后：沒有翻譯，沒有自關閉標簽
• 您只剩下影片的第一幀
  • 不是 SVG，而是您可以編程的字串模板文字
• Sprite-Meistersteps=48為您生成其他幀
  • 該circlepath函式計算x,y每一幀的位置
  • 每個<circle cx="${v1.x}" cy="${v1.y}"都不會旋轉圓圈；
    它在每一幀的不同位置繪制圓圈
• 并使用 CSS對生成的 SVG sprite-sheet進行影片處理

<script src="//sprite-meister.github.io/element.js"></script>
<script>console.log=()=>{/*don't bloat SO snippet console*/}</script>

<sprite-meister duration="5s" w="542" h="542" width="180px" steps="48">
    ${ setv1( circlepath({ radius:200 }) , "yellow circle position" )}
    <text y="10%" font-size="50px">frame: ${framenr} </text>
    <path fill="green" d="m163 158 1 1c116 110 0 204 0 205l-1 1c-3 6 3 3 4 3a446 446 0 0 0 210-213c0-2-3-2-3-1-4 5-81 88-207 0h-4v4m105 150s69 6 99 52c0 0 4 7 5 0a6 6 0 0 0 0-2c-3-8-31-77-55-99 0 0-35 38-49 49"></path>
    <circle cx="${v1.x}" cy="${v1.y}" r="34" fill="yellow" stroke="blue"></circle>
</sprite-meister>

資料來源：

• https://dev.to/dannyengelman/create-svg-spritesheet-animations-with-1-template-literal-string-3hee
• https://sprite-meister.github.io/
• https://sprite-meister.github.io/documentation.html

<sprite-meister> 不是 1.0 版

您需要相當多的 SVG 知識，并首先學習（至少是基礎知識）SVG SMIL 影片，以便您了解與sprite-sheet 影片的區別

標籤：动画片 svg

上一篇：如何為CubeThree.js制作浮動效果

下一篇：使用DOM插入Jquery的javascript中的影片