具有描边属性的 SVG 样式 G 元素

svg styling g element with stroke property

本文关键字：SVG 样式 元素 属性      更新时间：2023-09-26

例如从这种情况开始：

  <svg xmlns="http://www.w3.org/2000/svg">
    <g fill="green" stroke="red" stroke-width="5px">
       <rect width="180" height="122.85714" x="211.42857" y="335.21936" />
       <rect width="211.42857" height="182.85715" x="124.28571" y="375.21933" />
    </g>
  </svg>
由于"g"属性

，stroke 属性由两个"rect"元素继承。

当两个"矩形"元素不重叠时，这对我来说很有用。

当两个"矩形"元素重叠时，是否有一种技术可以获得唯一的轮廓（唯一的边框）？

几行 SnapSVG，用于为重叠的 Rect 提供不同的属性。没有捷径。

var s = Snap('#mySVG');
var g = s.select('#square_group');
var boxA = g.rect(11,11,200,200);
var boxB = g.rect(50,50,180,180);
if (Snap.path.isBBoxIntersect(boxA.getBBox(), boxB.getBBox())) {
    boxB.attr({
    fill: "#bada55",
    stroke: "#000",
    strokeWidth: 5
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="mySVG" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <g id="square_group" fill="green" stroke="red" stroke-width="5px">
    </g>
  </svg>

相关文章：