javascript - 如何在 svg 交互式 map 上设置城市边界？

标签 javascript jquery html css svg

我正在研究土耳其的交互式 SVG map 。有 81 个城市(它们是用 <g> 元素创建的)及其地区(它们是用 <g> 子元素创建的)。一个城市的边界出现在他们的地区的边界上。你可以看到下面的代码:

<g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        <g id="MER" transform="translate(85.000000, 98.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        <g id="YÜK" transform="translate(78.000000, 86.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        <g id="ŞEM" transform="translate(81.000000, 62.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon id="Shape" stroke="#FFFFFF" fill="#9FB4B7" fill-rule="nonzero" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        <g id="ÇUK" transform="translate(104.000000, 50.000000)" font-size="6" font-family="Helvetica-Bold, Helvetica" fill="#000000" font-weight="bold">
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
                    </g>
                </g>

我想设置粗而黑的外城边界，而不是地区。你可以看到

谢谢。

最佳答案

我不太清楚你在问什么，因为我不了解你所在国家/地区的地理位置。

您的 SVG 中有一些错误:您使用的是相同的 id几次，所以我把它改成了一个类(class)。此外，您的 SVG 非常冗长，因此我已将一些样式移至 css。

假设您想要绘制 4 个多边形的轮廓，我使用 SVG 滤镜绘制了红线:<g id="Hakkari" filter="url(#outline-red)" . . . .

我希望这就是您所要求的。

svg {
  border: 1px solid;
}

.Shape {
  stroke: #ffffff;
  fill: #9fb4b7;
}
text {
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  fill: #000000;
  font-weight: bold;
}

#Hakkari{filter:url(#outline-red); }
/*#Hakkari:hover{filter:url(#outline-red); }*/
<svg viewBox = "4570 1300 500 350">
  <defs>
    <filter id="outline-red">
    <feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="3"/>
    <feFlood flood-color="red" result="red" />
    <feComposite in ="red" in2="expanded" operator="in" />
    <feComposite in="SourceGraphic"/>
    </filter>
    
  </defs>
  <g id="Hakkari"  transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        <g id="MER" transform="translate(85.000000, 98.000000)" >
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
                    </g>
    
    
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon class="Shape"  points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        <g id="YÜK" transform="translate(78.000000, 86.000000)" >
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon class="Shape"  points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        <g id="ŞEM" transform="translate(81.000000, 62.000000)" >
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon class="Shape"  points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        <g id="ÇUK" transform="translate(104.000000, 50.000000)" >
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
                    </g>
  </g>
  
</svg>

更新:

这是给一组元素添加边框的另一种方法: 我正在使用该组作为带边框的背景。 然后我使用与预期相同的组。

svg {
  border: 1px solid;
}

#A {
  fill: red;
  stroke: red;
  stroke-width: 10px;
}

#B {
  stroke: #ffffff;
  fill: #9fb4b7;
}
text {
  font-size: 16px;
  font-family: Helvetica-Bold, Helvetica;
  fill: #000000;
  font-weight: bold;
  stroke: none;
}
<svg viewBox="4570 1300 500 350" width="500" height="350">
  <defs>
    <g id="Hakkari">
                    <g id="Merkez" transform="translate(10.000000, 2.000000)">
                        <polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
                        
                    </g>
    
    
                    <g id="Yüksekova" transform="translate(165.000000, 0.000000)">
                        <polygon class="Shape"  points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
                        
                    </g>
                    <g id="Şemdinli" transform="translate(244.000000, 107.000000)">
                        <polygon class="Shape"  points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
                        
                    </g>
                    <g id="Çukurca" transform="translate(0.000000, 143.000000)">
                        <polygon class="Shape"  points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
                        
                    </g>
  </g>  
  </defs>
  
<g transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87"> 
  <use id="A" xlink:href="#Hakkari" />
  <use id="B" xlink:href="#Hakkari"  />
  
  <g id="Hakkari_text">
    <g id="MER" transform="translate(85.000000, 98.000000)" >
                            <text>
                                <tspan x="0" y="6">MER</tspan>
                            </text>
                        </g>
    <g id="YÜK" transform="translate(243.000000, 86.000000)" >
                            <text>
                                <tspan x="0" y="6">YÜK</tspan>
                            </text>
                        </g>
    <g id="ŞEM" transform="translate(325.000000, 169.000000)" >
                            <text>
                                <tspan x="0" y="6">ŞEM</tspan>
                            </text>
                        </g>
    <g id="ÇUK" transform="translate(104.000000, 193.000000)">
                            <text>
                                <tspan x="0" y="6">ÇUK</tspan>
                            </text>
                        </g>
  </g>

  </g>
  
</svg>

关于javascript - 如何在 svg 交互式 map 上设置城市边界？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52763419/

上一篇：html - 为什么这些跨度的高度呈现不同？

下一篇：css - 将 div 与其父元素之外的元素水平对齐

相关文章：

c# - 从后面的代码中检索 javascript var 值

javascript - 漂亮的自动滚动页面，加上 "Spring"效果

Javascript 对象的 oop 问题

javascript - 为什么我的 slider 到达末尾后会变成空白？

java - 从jsp页表中获取值

javascript - 如何使用 javascript 将类添加到子元素？

javascript - 操作不适用于自定义控件上的呈现属性集，包含操作按钮

javascript - 垂直和水平对齐 Angular Material

html - 链接内的行内 block 元素 : strange behavior in IE 8

javascript - 如何通过单击页面关闭覆盖

©2024 IT工具网  联系我们