svg中的圆圈双击颜色

时间:2015-09-03 07:30:25

标签: css css3 svg css-shapes

这就是我用中风和无填充的方式制作圆圈

field
  • 我想要双击。

3 个答案:

答案 0 :(得分:8)

可悲的是,你无法将SVG设置为双击,只有虚线或实线。

相反,只需创建一个完全相同的元素,但要减少它所需的大小/半径。

Exchange exchange = consumerTemplate.receive("ftp:"+url);
producerTemplate.send("direct:uploadFileFTP",exchange );
.circle {
  fill: none;
  stroke: black;
}

答案 1 :(得分:0)

如果有人对使用正方形/矩形感兴趣,可以使用outline属性在SVG中实现双线边框,而无需添加多个<rect>条目,这可以使其干净一点。

.rect {
  fill: none;
  stroke: red;
  outline: 4px double black;
  outline-offset: 2px;
}
<svg height="100" width="100">
  <rect class="rect" height="50" width="50" x='25' y='25' />
</svg>

答案 2 :(得分:0)

要添加另一个更通用的解决方案:

这也可以通过使用过滤器来完成,方法是应用dilate在所有方向上将元素xor展开<svg width="600"> <filter id="dilate-and-xor"> <feMorphology in="SourceGraphic" result="dilate-result" operator="dilate" radius="1" /> <feComposite in="SourceGraphic" in2="dilate-result" result="xor-result" operator="xor" /> </filter> <circle class="circle" cx="450" cy="50" r="40" stroke="black" stroke-width="5" fill="none" filter="url(#dilate-and-xor)" /> <rect class="circle" x="250" y="20" width="50" height="50" stroke="black" stroke-width="5" fill="none" filter="url(#dilate-and-xor)" /> <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" stroke-width="5" filter="url(#dilate-and-xor)" /> </svg>,然后composite @Scheduled留下两者之间的区别。

name