Question

例如从这种情况开始：

  <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”元素继承。

当两个“rect”元素没有重叠时，这对我很有用。

当两个“rect”元素重叠时，是否有一种获取独特轮廓（独特边框）的技术？

Answer 1

几行SnapSVG为重叠的Rect赋予不同的属性。没有捷径。

＆＃13;

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
    })
}

＆＃13;

<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>

＆＃13;

svg样式与元素属性的g元素

1 个答案: