Question

我的svg代码存在一些问题。我试图将我的svg文件转换为html并且它没有正确旋转而是只是旋转，我想在它的轴上旋转它，你能帮我吗？

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
    height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <g id="Layer_2">
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#E1932A" d="M202,307.45c73.567-73.567,162.367-110.35,266.4-110.35
                c104.034,0,192.817,36.783,266.35,110.35c73.6,73.533,110.4,162.333,110.4,266.399c0,104.034-36.801,192.817-110.4,266.351
                c-73.533,73.566-162.316,110.35-266.35,110.35c-104.033,0-192.833-36.783-266.4-110.35C128.467,766.667,91.7,677.884,91.7,573.85
                C91.7,469.783,128.467,380.983,202,307.45z M234.8,340.15C170.267,404.683,138,482.567,138,573.8
                c0,91.233,32.267,169.101,96.8,233.601c64.5,64.533,142.367,96.8,233.6,96.8c91.267,0,169.133-32.267,233.6-96.8
                c64.533-64.5,96.8-142.367,96.8-233.601c0-91.233-32.267-169.117-96.8-233.65c-64.467-64.5-142.333-96.75-233.6-96.75
                C377.167,243.4,299.3,275.65,234.8,340.15z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#7A5215" d="M184.35,573.8c0,78.434,27.733,145.384,83.2,200.851
                c55.467,55.466,122.417,83.199,200.85,83.199c78.466,0,145.417-27.733,200.85-83.199c55.5-55.467,83.25-122.417,83.25-200.851
                c0-78.466-27.75-145.433-83.25-200.9c-55.434-55.467-122.384-83.2-200.85-83.2c-78.433,0-145.383,27.733-200.85,83.2
                C212.083,428.367,184.35,495.333,184.35,573.8z M234.8,340.15c64.5-64.5,142.367-96.75,233.6-96.75
                c91.267,0,169.133,32.25,233.6,96.75c64.533,64.533,96.8,142.417,96.8,233.65c0,91.233-32.267,169.101-96.8,233.601
                c-64.467,64.533-142.333,96.8-233.6,96.8c-91.233,0-169.1-32.267-233.6-96.8C170.267,742.9,138,665.033,138,573.8
                C138,482.567,170.267,404.683,234.8,340.15z"/>
            <animateTransform 
                attributeType="xml" 
                attributeName="transform" 
                type="rotate" 
                from="0" 
                to="360" 
                begin="0" 
                dur="5s" 
                repeatCount="indefinite" />
        </g>
    </g>
    <g id="Layer_5">
        <g>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="465.5498" y1="870.7773" x2="775.1497" y2="870.7773">
                <stop  offset="0" style="stop-color:#EC2F55"/>
                <stop  offset="1" style="stop-color:#882434"/>
            </linearGradient>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M465.55,904.2c78.667-0.066,151.717-26.917,219.15-80.55
                c33.8-7.834,64.533-18.733,92.2-32.7C723.503,862.792,658.069,910.676,580.6,934.6c-37.356,11.301-75.707,16.617-115.05,15.95
                V904.2z"/>
            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="520.5996" y1="863.9258" x2="656.0996" y2="863.9258">
                <stop  offset="0" style="stop-color:#76172A"/>
                <stop  offset="1" style="stop-color:#5F1523"/>
            </linearGradient>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_2_)" d="M684.7,823.65
                c-67.434,53.633-140.483,80.483-219.15,80.55V857.85c40.033,0,78-7.216,113.9-21.649C615.75,834.233,650.833,830.05,684.7,823.65z
                "/>
            <animateTransform 
                attributeType="xml" 
                attributeName="transform" 
                type="rotate" 
                from="0" 
                to="360" 
                begin="0" 
                dur="5s" 
                repeatCount="indefinite" />
        </g>
    </g>
</svg>

Answer 1

除角度外，旋转变换还可以采用两个额外的参数。那些是旋转中心的X和Y坐标。

因此，如果您将旋转中心添加到from和to属性中，您的形状将围绕其中心进行掠过。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
    height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
  <g id="both circles">
    <g id="Layer_2">
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#E1932A" d="M202,307.45c73.567-73.567,162.367-110.35,266.4-110.35
                c104.034,0,192.817,36.783,266.35,110.35c73.6,73.533,110.4,162.333,110.4,266.399c0,104.034-36.801,192.817-110.4,266.351
                c-73.533,73.566-162.316,110.35-266.35,110.35c-104.033,0-192.833-36.783-266.4-110.35C128.467,766.667,91.7,677.884,91.7,573.85
                C91.7,469.783,128.467,380.983,202,307.45z M234.8,340.15C170.267,404.683,138,482.567,138,573.8
                c0,91.233,32.267,169.101,96.8,233.601c64.5,64.533,142.367,96.8,233.6,96.8c91.267,0,169.133-32.267,233.6-96.8
                c64.533-64.5,96.8-142.367,96.8-233.601c0-91.233-32.267-169.117-96.8-233.65c-64.467-64.5-142.333-96.75-233.6-96.75
                C377.167,243.4,299.3,275.65,234.8,340.15z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#7A5215" d="M184.35,573.8c0,78.434,27.733,145.384,83.2,200.851
                c55.467,55.466,122.417,83.199,200.85,83.199c78.466,0,145.417-27.733,200.85-83.199c55.5-55.467,83.25-122.417,83.25-200.851
                c0-78.466-27.75-145.433-83.25-200.9c-55.434-55.467-122.384-83.2-200.85-83.2c-78.433,0-145.383,27.733-200.85,83.2
                C212.083,428.367,184.35,495.333,184.35,573.8z M234.8,340.15c64.5-64.5,142.367-96.75,233.6-96.75
                c91.267,0,169.133,32.25,233.6,96.75c64.533,64.533,96.8,142.417,96.8,233.65c0,91.233-32.267,169.101-96.8,233.601
                c-64.467,64.533-142.333,96.8-233.6,96.8c-91.233,0-169.1-32.267-233.6-96.8C170.267,742.9,138,665.033,138,573.8
                C138,482.567,170.267,404.683,234.8,340.15z"/>
        </g>
    </g>
    <g id="Layer_5">
        <g>
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="465.5498" y1="870.7773" x2="775.1497" y2="870.7773">
                <stop  offset="0" style="stop-color:#EC2F55"/>
                <stop  offset="1" style="stop-color:#882434"/>
            </linearGradient>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M465.55,904.2c78.667-0.066,151.717-26.917,219.15-80.55
                c33.8-7.834,64.533-18.733,92.2-32.7C723.503,862.792,658.069,910.676,580.6,934.6c-37.356,11.301-75.707,16.617-115.05,15.95
                V904.2z"/>
            <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="520.5996" y1="863.9258" x2="656.0996" y2="863.9258">
                <stop  offset="0" style="stop-color:#76172A"/>
                <stop  offset="1" style="stop-color:#5F1523"/>
            </linearGradient>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_2_)" d="M684.7,823.65
                c-67.434,53.633-140.483,80.483-219.15,80.55V857.85c40.033,0,78-7.216,113.9-21.649C615.75,834.233,650.833,830.05,684.7,823.65z
                "/>
        </g>
    </g>

    <animateTransform
       attributeType="xml" 
       attributeName="transform" 
       type="rotate" 
       from="0 468.425 573.825" 
       to="360 468.425 573.825" 
       begin="0" 
       dur="5s" 
       repeatCount="indefinite" />

  </g>
</svg>

此外，您不需要为每个图层添加重复的<animateTransform>元素。如果添加包含两个图层的组，则可以使用单个动画元素为它们设置动画。

此svg文件无法正常旋转

1 个答案: