创建按百分比或像素填充不同背景颜色的svg矩形
提问于 2013-06-11 20:20:59
我想用javascript动态创建svg矩形。这些矩形应该是一种2D图形条，填充了多种背景颜色，就像这样：
svg有没有可以处理多种背景颜色的形状？我不想使用多个矩形并试图定位它们...
事件会更好，如果有一种堆栈面板，我可以放入子元素中…
因为我想把这些元素绑定到knockoutjs上。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-11 20:32:45
如果您设置色标颜色，使渐变在色标处立即发生颜色变化，则可以使用linearGradient完成此操作。例如。
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient" x2="0%" y2="100%">
<stop offset="33%" stop-color="white" />
<stop offset="33%" stop-color="#FF6" />
<stop offset="66%" stop-color="#FF6" />
<stop offset="66%" stop-color="#F60" />
</linearGradient>
</defs>
<rect fill="url(#MyGradient)" stroke="black" stroke-width="5"
x="100" y="100" width="200" height="600"/>
</svg>或者，也许更简单，你可以用3种不同的填充动态创建3个矩形。如果您将矩形作为<g>元素的子元素，您可以在<g>元素上设置一个转换，它将把所有矩形放在一起。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17053043
复制
腾讯云开发者
