html - 在整个 SVG 上应用渐变

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>