Блог

Главная - Вопросы по программированию - SVG gradientUnits=»userSpaceOnUse» не работает с path

SVG gradientUnits=»userSpaceOnUse» не работает с path

#html #svg

Вопрос:

В приведенном ниже фрагменте вы увидите 2 SVG-изображения, одно с кругами и одно с контурами, оба без использования gradientUnits="userSpaceOnUse" . И результат-это то, что вы ожидаете.

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <circle cx="24" cy="24" r="24"/>
        <circle cx="72" cy="24" r="24"/>
        <circle cx="72" cy="72" r="24"/>
        <circle cx="24" cy="72" r="24"/>
    </g>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
    </g>
</svg>

Но при использовании gradientUnits="userSpaceOnUse" с SVG выше SVG с кругами показывает обычное поведение, и градиент можно увидеть по нему в целом, в то время как SVG с путями показывает сплошной цвет, как вы можете видеть ниже:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <circle cx="24" cy="24" r="24"/>
        <circle cx="72" cy="24" r="24"/>
        <circle cx="72" cy="72" r="24"/>
        <circle cx="24" cy="72" r="24"/>
    </g>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad1)">
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 0)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(21, 21)" />
        <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" transform="scale(2.2) translate(0, 21)" />
    </g>
</svg>

Ответ №1:

  • Вы преобразуете формы в случае userSpaceOnUse. Градиент применяется к нетрансформированным путям, которые находятся в верхней части страницы и, следовательно, красны.
  • вы дублируете идентификационные данные. Это неверно.

Вот один из способов заставить градиент работать.

  1. Я удалил переводы и восстановил пути, чтобы они не требовались. Чтобы сделать это проще, я сделал пути относительными, а не абсолютными.
  2. Я добавил градиентную форму, чтобы противодействовать масштабированию пути.
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 96 96" width="120px">
    <defs>
        <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.45)">
            <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        </linearGradient>
    </defs>

    <g fill="url(#grad2)">
        <path d="M12,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z"  transform="scale(2.2)"/>
        <path d="M33,21.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
        <path d="M33,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
        <path d="M12,42.35l-1.45,-1.32c-5.15,-4.67,-8.55,-7.76,-8.55,-11.53c0,-3.09,2.42,-5.5,5.5,-5.5c1.74,0,3.41,0.81,4.5,2.08c1.09,-1.27,2.76,-2.08,4.5,-2.08c3.08,0,5.5,2.41,5.5,5.5c0,3.77,-3.4,6.86,-8.55,11.53l-1.45,1.32z" transform="scale(2.2)"/>
    </g>
</svg>

Комментарии:

1. Я тупо продублировал id значения только для того, чтобы сформулировать этот мой плохой вопрос. Большое спасибо за это преобразование из абсолютного в относительное.

Метки: