Question

我想绘制一个SVG轮，它将旋转并具有线性渐变。此外，在旋转时，车轮应在同一位置（顶部）具有坡度。我画了它：

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
            <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#bec7cf"/>
        </linearGradient>
    </defs>
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="url(#lines)" stroke-width="10"></circle>
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url(#wheel)" stroke-width="10"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10"></line>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(30 475 475)"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(30 475 475)"></line>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(60 475 475)"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(60 475 475)"></line>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(90 475 475)"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(90 475 475)"></line>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(120 475 475)"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(120 475 475)"></line>

    <line x1="457" y1="80" x2="457" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(150 475 475)"></line>
    <line x1="492" y1="80" x2="492" y2="870.00" stroke="url('#wheel')" stroke-width="10" transform="rotate(150 475 475)"></line>
</svg>

但渐变是随着数字旋转。

有没有办法可以将元素分组并在整个组中应用渐变作为一个数字？

Answer 1

这是我的解决方案，但我相信有一个更容易。

我用轮线创建了两组。其中一个颜色为我所需渐变色的第二种颜色，另一种颜色用白色到黑色渐变遮盖。

然后我用<animateTransform>制作动画。当我的轮子顺时针旋转时，我的渐变向后旋转。

<svg width="950" class="wheel" height="950" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="wheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#bec7cf"/>
        </linearGradient>

        <linearGradient id="transwheel" x1="0%" y1="0%" x2="0%" y2="50%" gradientUnits="userSpaceOnUse">
            <stop offset="0%"   stop-color="#fff"/>
            <stop offset="100%" stop-color="#000"/>
        </linearGradient>
    </defs>
    <circle cx="475" cy="475" r="430" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>
    <circle cx="475" cy="475" r="395" stroke="url(#wheel)" fill="transparent" stroke-width="10"></circle>

    <mask id="clipping" maskUnits="userSpaceOnUse">
        <circle cx="475" cy="475" r="800" fill="white"></circle>
        <circle cx="475" cy="475" r="70" fill="black"></circle>
    </mask>

    <mask id="gradient" maskUnits="userSpaceOnUse">
        <rect x="0" width="950" y="0" height="950" fill="url(#transwheel)" transform="rotate(0 475 475)">
            <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="-30 475 475" dur="3s" repeatCount="1"></animateTransform>
        </rect>
    </mask>

    <g>
        <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="#bec7cf" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line>
    </g>

    <g mask="url(#gradient)">
        <animateTransform attributeName="transform" type="rotate" from="0 475 475" to="30 475 475" dur="3s" repeatCount="1"></animateTransform>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(30 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(60 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(90 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(120 475 475)" mask="url(#clipping)"></line>

        <line x1="457" y1="80" x2="457" y2="870.00" stroke="white" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line>
        <line x1="492" y1="80" x2="492" y2="870.00" stroke="white" stroke-width="10" transform="rotate(150 475 475)" mask="url(#clipping)"></line>
    </g>
</svg>

在整个SVG上应用渐变

1 个答案: