当svg容器的高度/宽度与高度/宽度不相同时，为什么d3中的径向梯度会发生变化？
谢谢，这是我的代码：
var w = 1000, h = 1000
r = Math.min(w, h) /4 ;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h)
.append("g")
.attr("transform", "translate(" +Math.min(w,h)/2 + "," +Math.min(w,h) /2 + ")");
var radialGradient = d3.select("svg").append("defs")
.append("radialGradient")
.attr("id", "radial-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", "60%")
.attr("spreadMethod", "reflect");
radialGradient.append("stop")
.attr("offset", "15%")
.attr("stop-color", "red");
radialGradient.append("stop")
.attr("offset", "25%")
.attr("stop-color", "#fff");
radialGradient.append("stop")
.attr("offset", "35%")
.attr("stop-color", "red");
svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", r)
.style("fill", "url(#radial-gradient)");
共有1个答案
您已经将渐变的中心设置为(cx，cy)0，0容器的原点，并告诉use container space：userspaceonuse。
要更正这一点，只需更改为：
.attr("gradientUnits", "objectBoundingBox") // your object limits
.attr("cx", "50%")
.attr("cy", "50%") // your object center
希望有帮助
-
组件的高度和宽度决定了其在屏幕上显示的尺寸。 指定宽高 最简单的给组件设定尺寸的方式就是在样式中指定固定的 width 和 height 。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。 export default class HelloWorld extends Component { render() { return ( <
-
问题内容： 目前，通过STYLE，我可以在和高度上使用和，反之亦然，但是我仍然不能将图像分别限制在一个特定的位置，无论是太宽还是太高。 有任何想法吗？ 问题答案： 如果仅在图像上定义一维，则将始终保留图像长宽比。 图像是否比您喜欢的更大/更佳？ 您可以将其放入DIV中，该DIV设置为图像所需的最大高度/宽度，然后设置“ overflow：hidden”。那将收获超出您想要的任何东西。 如果图像的宽
-
主要内容：1. width,2. height,3. max-width 和 max-height,4. min-width 和 min-heightCSS 尺寸属性指的就是元素的宽度和高度属性，虽然说非常简单，但却是必须掌握的技能。CSS 中提供了 width、height、max-width、min-width、max-height 和 min-height 等几个属性来设置元素的宽度和高度，这些元素使用起来非常简单，下面我们就来简单介绍一下。 1. width 通过 width 属性可以设
-
问题内容： 因此，我的游戏从垂直方向开始，然后最终变为水平方向。我知道屏幕的宽度是屏幕的宽度，并且在垂直方向上与高度相同。切换为水平方向时，高度是否变为宽度，宽度是否变为高度？还是保持不变？ 问题答案： 是的，屏幕的宽度和高度取决于设备的方向。您可以获取显示的大小，用该显示大小可以代替不推荐使用的方法和。从文档中：根据显示器的当前旋转为您调整此值。
-
编辑：codesandbox:https://codesandbox.io/s/40xj3zv5w7上的示例，图像变得非常小，而不是400px宽和10px高。
-
问题内容： 应用后如何检索width和height属性？ 例如，旋转后的11x11平方变为17x17（Chrome结果），但是javascript仍返回原始宽度/高度-10x10。 我如何获得17x17？ 问题答案： 即使旋转某些东西，它的尺寸也不会改变，因此您需要一个包装纸。尝试用另一个div元素包装div并计算包装器尺寸： 重做： 包装器解决方案无法正常工作，因为包装器未自动调整为内部div的