在单个 div 中堆叠两个嵌入式 SVG答案

【问题标题】：Stacking two embedded SVGs in single div在单个 div 中堆叠两个嵌入式 SVG
【发布时间】：2019-09-01 08:00:06
【问题描述】：

我有一对以编程方式生成的复杂黑白 svg 文件。 FWIW 它们代表了电路板设计的两个版本。

这里有两个例子

https://pastebin.com/uh6TtP0m

https://pastebin.com/MqareMLv

我试图在视觉上比较它们，如果我对这些文件中的每一个应用一个 feMatrix 过滤器并覆盖它们，我可以获得两个文件的不同之处。

我使用 pan-zoom-svg 在 separate div 中使用此策略同步缩放/平移两个版本，以便可以将两个图像放大到相同的感兴趣区域。

我希望能够平移和缩放组合图像。为了实现这一点，我尝试在样式表中放置两个具有固定属性的 svg，以保持它们对齐。封闭的 div 具有相对属性。图像在嵌入标签中（我也尝试过对象标记。pan-zoom-svg 不支持处理图像标记的 svgs）。

合并后的图像完全符合我的要求 - 我可以根据需要平移和缩放它，但是我无法将它放在最终网页上的 div 中，因为它会溢出。

我不清楚这是我的代码中的缺陷还是 svg-pan-zoom 的限制。对单个而不是两个 svg 副本使用相同的技术效果很好。

我正在以编程方式生成多个修订的比较页面。

这两个过滤后的图像都已正确对齐并平移和缩放，但是，我似乎无法将它们放在一个 div 中以与我的网页的其余部分一起设置它们的样式。

[编辑以删除隐藏某些文本的不正确标记格式]

window.onload = function() {
  // Expose variable to use for testing
  window.zoomBoard = svgPanZoom('#diff', {
    zoomEnabled: true,
    controlIconsEnabled: true,
  });

  // Expose variable to use for testing
  window.zoomBoard2 = svgPanZoom('#diff2', {
    zoomEnabled: true,
    controlIconsEnabled: true,
  });

  zoomBoard.setOnZoom(function(level) {
    zoomBoard2.zoom(level)
    zoomBoard2.pan(zoomBoard.getPan())
  })

  zoomBoard.setOnPan(function(point) {
    zoomBoard2.pan(point)
  })

  zoomBoard2.setOnZoom(function(level) {
    zoomBoard.zoom(level)
    zoomBoard.pan(zoomBoard2.getPan())
  })

  zoomBoard2.setOnPan(function(point) {
    zoomBoard.pan(point)
  })
};

.responsivefull {
  padding: 5 5px;
  width: 100%;
  margin: 3px 0;
  position: relative;
}

.diff1filter {
  filter: url(#f1);
}

.diff2filter {
  filter: url(#f2);
}

.lock {
  position: fixed;
  top: 1px;
  right: 3px;
  outline: #ddd;
}

<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.0/dist/svg-pan-zoom.min.js"></script>

<body>
  <div class="title">ThermocoupleLogger</div>
  <div class="subtitle">F_Cu</div>


  <svg width="0" height="0" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="f1" x="0%" y="0%" width="100%" height="100%">
                <feColorMatrix result="original" id="c1" type="matrix" values="1   0   0   0   0
                                                0   1   0   1   0
                                                0   0   1   1   0
                                                0   0   0   1  0 " />
            </filter>
            <filter id="f2" x="0%" y="0%" width="100%" height="100%">
                <feColorMatrix result="original" id="c2" type="matrix" values="1   0   0   1   0
                                        0   1   0   0   0
                                        0   0   1   0   0
                                        0   0   0   0.5   0" />
            </filter>
        </defs>
    </svg>

  <div class="responsivefull">
    <embed id="diff" class="diff1filter lock" type="image/svg+xml" src="https://pastebin.com/raw/uh6TtP0m" style="position:absolute;" />
    <embed id="diff2" class="diff2filter lock" type="image/svg+xml" src="https://pastebin.com/raw/MqareMLv" style="position:absolute;" />
  </div>

【问题讨论】：

标签： javascript html css svgpanzoom

【解决方案1】：

filter 和 blend-mode 的混合使用可以很容易地发现差异。

<!doctype html>

<html>

<head>
  <title>Spot differences in SVGs</title>

  <style>
    :root {
      --zoom-factor: 300%;
      --pan: 0px;
      --tilt: 0px;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    .overlapping-images-container {
      position: relative;
      padding: 1rem;
      height: 100vh;
      width: 100%;
      box-sizing: border-box;
    }

    .overlapping-images-container::before,
    .overlapping-images-container::after {
      position: absolute;
      content: '';
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-repeat: no-repeat;

      background-size: var(--zoom-factor);
      background-position-y: var(--tilt);
      background-position-x: var(--pan);
    }

    .overlapping-images-container::before {
      background-image: url('F_Cu_3c9fec.svg');
      filter: invert(1);
      z-index: 1;
    }
    .overlapping-images-container::after {
      background-image: url('F_Cu_340edd.svg');
      mix-blend-mode: exclusion;
      z-index: 2;
    }

  </style>
</head>

<body>

  <div class="overlapping-images-container"></div>

</body>

</html>

http://erebaltor.se/rickard/stackoverflow/overlappingSVGs.html

我添加了您可以通过 javascript 或控制台操作的 CSS 变量，以便您可以缩放和左右或上下移动图像。

【讨论】：

虽然这突出了差异，但它并没有以完全相同的方式显示在同一视图中添加了哪些功能以及删除了哪些功能。在原始过滤器函数中，添加为蓝色，删除为红色。但是，它确实提供了一种将差异图像包含在单个 div 中的有趣方式。尝试一些替代策略对我来说是一个很好的起点。
对不起。我现在看到没有完全阅读您的帖子。这是一个深夜的帖子。我将离开我的职位作为暂时愚蠢的证据。 :) 但我想你至少可以考虑使用伪元素::before 和::after 以更好的方式控制溢出。