# SVG ## SVG ### 沿著path移動 使用inkscape畫一條線，存成SVG\ 類似如下 ``` image/svg+xml ``` 刪除不必要的東西後簡化如下 ``` ``` 之後直接貼到HTML的BODY內會產生你剛畫的線 再使用MOTIONPATH，並加入一個藍色方塊 ``` ``` ## 移動SVG位置 加入g元素，然後使用translate(x, y) ```javascript ``` ## SVG動畫 SVG上的屬性可以直接當作css的屬性控制 css ```css @keyframes example { from {r: 40} to {r: 140} } #circle1 { animation-name: example; animation-duration: 2s; animation-fill-mode: forwards; } ``` html ```markup ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://easonwang.gitbook.io/web_basic/svg.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.