gpt4 book ai didi

javascript - 在单个 div 中堆叠两个嵌入式 SVG

转载 作者:行者123 更新时间:2023-11-28 00:07:25 26 4
gpt4 key购买 nike

我有一对复杂的黑白 svg 文件,这些文件是通过编程生成的。 FWIW 它们代表电路板设计的两个修订版。

举两个例子

https://pastebin.com/uh6TtP0m

https://pastebin.com/MqareMLv

我试图在视觉上比较它们,如果我对这些文件中的每一个应用 feMatrix 过滤器并叠加它们,我可以看到这两个文件有何不同。

screenshot of filtered and superimposed example

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

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

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

我不清楚这是我的代码中的缺陷还是 svg-pan-zoom 的限制。对单个 svg 使用相同的技术而不是两个 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>

最佳答案

通过混合使用 filterblend-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 变量,因此您可以缩放、左右或上下移动图像。

Example of how it can look like

关于javascript - 在单个 div 中堆叠两个嵌入式 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55619686/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com