gpt4 book ai didi

css - 使用 SVG 和 CSS 创建直线和圆的交点

转载 作者:太空宇宙 更新时间:2023-11-03 18:03:42 24 4
gpt4 key购买 nike

我正在使用谷歌地图进行交互式 map 。有一个限制,标记将始终是一个圆圈。我需要圆圈和两条线的交点,如下所示。

Intersection of lines and circle

除了 CSS,我无法访问任何东西。是否可以添加 CSS,以便我可以获得沿 SVG 圆的线的交点。

这是我的 JSfiddle 代码,我在其中尝试向 SVG 圆圈添加线条。

http://jsfiddle.net/sreeram62/8QRAJ/

<svg height="210" width="500">
<circle cx="50" cy="50" r="5" stroke="black" stroke-width="0" fill="#00FFFF" />
Sorry, your browser does not support inline SVG.
</svg>

circle:after {
content: '';
display: block;
height: 1px;
width: 300px;
position: absolute;
top: 50%;
left: -125px;
background-color: #f00;
}

circle:before {
content: '';
display: block;
height: 300px;
width: 1px;
position: absolute;
left: 50%;
top: -125px;
background-color: #f00;
}

最佳答案

我认为这不可能或太难了,但我为此制作了示例代码。
我在圆形元素的过滤器属性中使用内联 svg。
当我测试时,这段代码只在 firefox 上运行良好,在 chrome 上运行不正常。
(我不知道这个示例对使用谷歌地图有用。)

参见 http://jsfiddle.net/defghi1977/39gjd/

图形:

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle cx="100" cy="100" r="10" fill="red"/>
</svg>

CSS:

circle{
filter: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><defs><filter id='f' x='-3' y='-3' width='7' height='7' primitiveUnits='objectBoundingBox'><feFlood flood-color='black' x='-3' y='0.45' width='7' height='0.1' result='hb'/><feFlood flood-color='black' x='0.45' y='-3' width='0.1' height='7' result='vb'/><feMerge><feMergeNode in='SourceGraphic'/><feMergeNode in='hb'/><feMergeNode in='vb'/></feMerge></filter></defs></svg>#f");
}

关于css - 使用 SVG 和 CSS 创建直线和圆的交点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25053590/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com