<style> g {position:absolute;width:auto;height:100%;transform-origin:50% 50%;} .rotate{animation:rotation 12s infinite linear} @keyframes rotation{ from {transform:rotate(0deg)} to {transform:rotate(359deg)} } </style> <svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> <title>Circular Text Path</title> <style> text { font-size: 76px; font-family: Copperplate, Copperplate Gothic, serif; font-weight: bold; font-variant: small-caps; font-variant-ligatures: none; stroke: black; stroke-width: 1.5px; fill: white; } </style> <g class="rotate"> <defs> <path id="textcircle" d="M250,400 a150,150 0 0,1 0,-300a150,150 0 0,1 0,300Z" transform="rotate(12,250,250)"/> </defs> <rect width="100%" height="100%" fill="white" /> <path d="M150,50 250,400 350,50 250,300z" fill="gold" stroke="blue"/> <text> <textPath xlink:href="#textcircle" aria-label="All for One & One for All" textLength="942"> One for All for One &</textPath> </text> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg animation using inkscape (0) | 2023.09.02 |
---|---|
svg clipPath animation (0) | 2023.09.02 |
svg animateTransform example (0) | 2023.09.01 |
svg animationMotion (0) | 2023.09.01 |
svg textPath example 1 (0) | 2023.08.31 |