小编JMc*_*Far的帖子

渐变中的 CSS 渐变

是否可以将渐变用作渐变中的一种颜色?

对于我的特定目的,我有一个从左到右的初始渐变:

linear-gradient(to right, red, darkgray);
Run Code Online (Sandbox Code Playgroud)

但我希望深灰色部分实际上是从上到下的渐变:

linear-gradient(to bottom, darkgray, white);
Run Code Online (Sandbox Code Playgroud)

我尝试了我希望工作的代码:

linear-gradient(to right, red, linear-gradient(to bottom, darkgray, white));
Run Code Online (Sandbox Code Playgroud)

但这似乎不起作用,而且我还没有看到有人写过关于渐变中渐变的可能性。

编辑:这是不可能的 [CSS 渐变是图像,不能用作其他渐变中的颜色],但@hungerstar 在下面有一个很好的解决方法:在另一个渐变上叠加一个带有透明度的渐变。

css gradient colors linear-gradients

3
推荐指数
2
解决办法
1539
查看次数

围绕其中心旋转可缩放且平移的 SVG 元素

我正在尝试旋转 SVG 内的路径。

因为 SVG 中的旋转工作方式与通过 CSS 处理其他 html 元素的工作方式不同(即 SVG 中的默认轴是元素的左上角而不是中心),所以我遇到了很多问题。

我需要使用中心点作为轴来旋转路径。我可以通过将变换原点设置为 50% 50% 来做到这一点,但是我还需要平移和缩放路径,并且更改变换原点会捏造翻译。

假装路径是静态大小,我可以通过将 x/y 作为路径宽度/高度的一半包含在“旋转(90,x,y)”中来实现。但是,SVG 会自动缩放以适应窗口大小,因此路径的宽度/高度是动态的。(即,如果我在给定的尺寸下正确设置旋转轴的位置,随着窗口尺寸的变化,它会越来越不正确地扭曲。我没有找到使用百分比来做到这一点的方法 - 请告诉我,如果您知道一个方法!)

我想我可能错过了一些非常简单的东西,但我自己一直在努力解决它。如何使用它们的中心作为轴来旋转这些路径(具有平移的动态大小路径)?

(我还尝试将一些变换应用于父元素,但这只会导致路径剪切)

基本问题:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
        <g>
        <path class="A" transform="translate(1000 1000) rotate(0) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        <path class="B" transform="translate(1000 1000) rotate(45) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        <path class="C" transform="translate(1000 1000) rotate(90) scale(20)" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z" d="m23.5,2 16.5,14.3-16.5,14.3v-6.8h-15v-15h15v-6.8z"/>
        </g>
    </svg>
Run Code Online (Sandbox Code Playgroud)

我无法让 A、B 和 C 的中心共享一个 x/y 坐标,同时保持它们的平移和响应能力。

谢谢

svg

3
推荐指数
1
解决办法
2196
查看次数

标签 统计

colors ×1

css ×1

gradient ×1

linear-gradients ×1

svg ×1