- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我现在正在研究 SVG,并卡在径向渐变主题上,关于精确移动径向渐变中心。比方说,我有 2 个渐变示例 ( codepen snippet to play around )。一个基本的(完美运行):
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye)"/>
</svg>
还有一个示例,我尝试应用 fx
和 fy
属性来移动渐变焦点:
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye2" cx="50%" cy="50%" r="10%" fx=".2" fy=".2" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" rx="10%"fill="url(#bullseye2)"/>
</svg>
在这里它只是切割了一 block 形状而不是仅仅移动了一个中心点。
你能解释一下我在这里做错了什么以及为什么它以如此奇怪的方式工作吗?
最佳答案
定义径向渐变时有两个主要概念:
稍后我会提到“重复”选项,但现在:渐变从焦点向外渲染,直到到达外部形状。也许这有助于想象外部形状在到达焦点之前不断缩小。
这意味着如果焦点在定义的形状内,它会显得相当直观:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
fx="0.35" fy="0.35">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="45" cy="45" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
(示例取自 MDN,稍作修正和微调)
但是,如果焦点在边界形状之外,您最终会得到更像圆锥体的东西:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.5"
fx="0.05" fy="0.05">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="15" cy="15" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="28" y="30" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
请注意,它仍然采用圆圈并将其“缩小”到焦点,但由于焦点现在位于圆圈之外,因此它无法为锥体之外的点定义任何有意义的颜色。
您可以使用 fx
和 fy
移动焦点。还有 fr
有时有用但暂时忽略它;无论如何,您都可以对色标位置执行相同的操作。
您使用cx
、cy
和r
移动圆圈。
移动两者的效果只是平移渐变。
重复使这有点困惑,但也许这个演示会澄清:
<svg viewBox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient" cx="0.5" cy="0.5" r="0.3"
fx="0.4" fy="0.4" spreadMethod="repeat">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" width="100" height="100"
fill="url(#Gradient)" />
<circle cx="60" cy="60" r="30" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="50" cy="50" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg>
白色圆圈仍然定义了形状,因此为了直观的结果,焦点应该在它里面。
在您发布的示例中,渐变本身非常小;仅占据中心周围 10 个像素的半径。它定义了单一的颜色过渡。条纹效果是由于 repeat
选项。这是您的示例,其中显示了焦点和外部形状:
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" fill="url(#bullseye)"/>
<circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="50%" cy="50%" r="2" fill="white" stroke="white"/>
</svg>
这是您的第二个示例(为清楚起见,这次焦点以黑色显示):
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"xmlns:xlink="http://www.w3.org/1999/xlink"width="200px" height="200px" viewBox="0 0 200 200">
<title>Bulls-eye Repeating Radial Gradient</title>
<radialGradient id="bullseye"cx="50%" cy="50%" fx=".2" fy=".2" r="10%" spreadMethod="repeat">
<stop stop-color="tomato" offset="50%"/>
<stop stop-color="#222" offset="50%"/>
</radialGradient>
<rect width="100%" height="100%" fill="url(#bullseye)"/>
<circle cx="50%" cy="50%" r="10%" fill="transparent" stroke="white" stroke-width="1"/>
<circle cx="20%" cy="20%" r="2" fill="black" stroke="black"/>
</svg>
关于SVG 径向渐变 - 移动焦点(中心),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59694933/
我正在尝试快速创建一个径向 CAGradientLayer。普通 CAGradientLayers(默认类型 axial)没有问题。它们在模拟器中的快照和运行时呈现良好。 当我拍摄我创建的 UIVie
我想用 CSS 制作一个径向进度指示器,它的中间圆圈是透明的。看这里:http://codepen.io/geedmo/pen/InFfd – 这是我想要做的事情的完美示例,但中间 (.overlay
我已经编写了用于生成网络图的 UI、服务器和 global.r。它适用于一种布局(layout.fruchterman.reingold)。我想要一个用于列出布局的单选按钮(径向、对角线网络和 den
我正在使用 jqwidgets。在那些小部件中,我使用的是径向量规。对于那个径向仪表,我想给出径向背景色。我有一个类似这样的代码,用于更改径向仪表中的背景颜色。 $('#gauge').jqxGaug
有谁知道我可以用来为 iOS 应用程序创建饼图(径向)菜单的库(开源或其他)? 看来现在应该有人想到了这一点,如果没有必要,我不愿意自己动手。 最佳答案 我不久前发现的一个。 http://www
我正在使用 this code为我的数据获取径向 TreeMap 。但是,我想修改它以避免弯曲链接。相反,我对线性直接连接感兴趣。弯曲的链接使插图不那么复杂,特别是当我们的子节点数量较少时。例如,您可
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我正在使用 chrome 18.0.1025.162 并尝试进行径向渐变 -webkit-radial-gradient(circle, rgba(100, 100, 100, 0.2), rgba(
我想呈现漂亮的径向树布局,但有点被弯曲的边缘绊倒了。问题是源点和目标点之间的角度不同,边缘的绘制方式也不同。提供的图片来自单个图表,因此您可以看到它们在不同边缘方向上有何不同。我认为关键在于 beiz
我希望我的工具栏使用 Material 设计径向 react 编排指南改变颜色 我想将其实现为 Angular 2 过渡,但我不知 Prop 体该怎么做: 看起来像这样.. @Component({
我目前正在使用以下代码绘制形状; GLfloat vertex = // vertex points glLineWidth(2); glEnableClientState(GL_VERTEX_ARR
我是一名优秀的程序员,十分优秀!