如何创建具有类似于的填充和轮廓的路径
到目前为止,我已经找到了几种方法,但是没有一种方法特别干净。
一种方法是使用paint-order,但这在移动设备和IE中不起作用。
另一种方法是复制路径...但是这会产生不必要的数据量。
使用CSS可以简单地为SVG路径创建轮廓或边框吗?
<svg height="50" width="300">
<path d="M5 20 1215 20" />
</svg>
path {
fill: red;
stroke: #646464;
stroke-width:10px;
stroke-linejoin: round;
}
这是一个codepen
最佳答案
您必须这样绘制路径作为轮廓:
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220">
<path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<path fill="#fff" stroke="#00b400" stroke-width="4"
d="M 159.8 30.3
h -110
v 120
h-20
l 30 40
30 -40
h-20
v-100
h90"/>
</svg>
在Inkscape中绘制草图,在SVGOMG中进行优化,然后手动进行调整。
编辑
我有一个使用标记的可行解决方案,其工作方式如下:
<svg style="display: inline-block; margin-left: 2em;" width="220" height="220" viewBox="0 0 220 220" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.arrow-stroke {
stroke: #00b400;
stroke-width: 28;
/* marker-end etc should be supported but unsure of browser support */
}
.arrow-fill {
stroke: white;
stroke-width: 20
}
</style>
<marker id="arrow" markerWidth="45" markerHeight="70" refX="5" refY="35" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#fff" stroke="#00b400" stroke-width="4" d="M 2 25 v-20 l 40,30 -40,30 v-20"/>
</marker>
<!-- Used to hide hairline that shows through, fill color must match background color -->
<marker id="startMask" markerWidth="2" markerHeight="30" refX="1" refY="15" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#ddd" d="M0 0 v30 h2 v-30 z" />
</marker>
<symbol id="line">
<path d="M 159.8 30.3 h -110 v 120"/>
</symbol>
<symbol id="line2">
<path d="M 140 60 l 20 30"/>
</symbol>
<symbol id="line3">
<path d="M 100 80 q 0 40 20 70"/>
</symbol>
</defs>
<path id="grey-box" fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<g fill="none">
<use xlink:href="#line" class="arrow-stroke" />
<use xlink:href="#line" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line2" class="arrow-stroke" />
<use xlink:href="#line2" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line3" class="arrow-stroke" />
<use xlink:href="#line3" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
</g>
</svg>
希望这可以帮助
关于css - 带边框的SVG路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41983531/