我必須制作一個語音氣泡，并且已經為我提供了一個 SVG，用于指向演講者的氣泡部分。我試圖讓盒子本身成為一個有邊框的常規 div（這個 div 將根據其內容具有動態的高度和寬度，但是 SVG 將保持相同的大小）。
我已經做了類似于這個 stackblitz 示例的事情：
但是，當使用外部顯示幕，甚至是帶有 2560x1440 顯示幕的 Windows PC 時，SVG 看起來并沒有完全對齊。
使用瀏覽器縮放時問題更加明顯。這是它在 75% 縮放的 Windows PC 上的外觀：
這里看起來邊框被縮小到了 1px 寬度，所以 SVG 路徑看起來不僅沒有對齊，而且尺寸也不正確。
有沒有辦法使 SVG 的行為與邊框寬度相同，以便它們始終對齊且大小相同？也許有其他方法可以達到同樣的效果？
uj5u.com熱心網友回復：
瀏覽器不會在上渲染子像素，borders但會在SVG. 這意味著在 125% DPI 縮放您的邊框在技術上是 2.5 像素，但得到四舍五入到 2 像素。
解決此問題的一種方法是添加resolution media queries.
@media (min-resolution: 120dpi) {
.box {
border-width: 2.5px;
}
}
演示： https ://stackblitz.com/edit/angular-ivy-vbqtnz
以下是縮放級別和相應 dpi 值的簡短串列：
- 較小的 100%（默認）= 96 dpi
- 中等 125% = 120 dpi
- 更大的 150% = 144 dpi
- 超大 200% = 192 dpi
uj5u.com熱心網友回復：
我不確定你能做些什么。SVG 具有圍繞縮放和抗鋸齒的行為，這與瀏覽器處理邊框寬度縮放的方式不同。
一種解決方案（您可能不太喜歡）是通過關閉抗鋸齒，讓 SVG 的行為與邊框的行為類似。您可以通過添加shape-rendering="crispEdges"到<path>.
<path
d="M43 37L38 37C38 37 34 29.6686 26 22.4215C18 15.1745 7.5 8.34577 5 10.3566C2.5 12.3674 5.5 15.8864 6 24.9351C6.5 33.9838 5 37 5 37L0 37"
stroke="currentcolor"
stroke-width="2"
shape-rendering="crispEdges"
/>
SVG 筆劃的大小將更接近邊框寬度。但是路徑的彎曲形狀現在看起來“鋸齒狀”令人不快。
我的建議：將整個對話泡泡切換到相同的技術。要么都是 HTML，要么都是 SVG。
或者只是忍受細微的差別。
uj5u.com熱心網友回復：
您還可以通過使用回應式/靈活的背景 svg 來實作一致的邊框渲染：
在這種情況下，您不會應用viewBox屬性。元素（帶有圓角，
并且需要偏移來為氣泡的“尾巴”提供足夠的空間）。
外部氣泡邊框元素只是通過相對/絕對位置背景關系進行拉伸。<rect>rxry
:root {
--stroke-width: 2;
--stroke-width-bg: 4;
--stroke-color: orange;
--bubble-bg:#fff;
}
* {
box-sizing: border-box;
}
body {
font-size: 5vmin;
line-height: 1.35em;
font-family: "Segoe UI", sans-serif;
}
.resize {
resize: both;
position: relative;
border: 1px solid #ccc;
overflow: auto;
padding: 1em;
width: 75vw;
margin: 0 auto;
}
.text-box {
position: relative;
border: none;
overflow: visible;
width: 100%;
padding: 40px 0 1em 0;
margin-bottom: 40px;
}
.text-box p {
margin: 0;
}
.text-box-left .svgBG {
transform: scale(-1, 1);
--stroke-color: blue;
--bubble-bg: #9edbfa;
}
.text-content {
position: relative;
padding-top: 3em;
padding: 0 1.5em;
z-index: 10;
}
.svgBG {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow: visible;
padding-bottom: 1em;
}<div class="resize">
<div class="text-box">
<svg class="svgBG">
<use href="#bubbleOuter" />
</svg>
<div class="text-content">
<h3>mdn webdocs: vector-effect</h3>
<p>The vector-effect property specifies the vector effect to use when drawing an object. Vector effects are applied before any of the other compositing operations, i.e. filters, masks and clips. <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect">readmore</a></p>
</div>
</div>
<div class="text-box text-box-left">
<svg class="svgBG">
<use href="#bubbleOuter" />
</svg>
<div class="text-content">
<h3>mdn webdocs: viewBox</h3>
<p>The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. The numbers, which are separated by whitespace and/or a comma, specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport). <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox">readmore</a></p>
</div>
</div>
<p style="text-align:right">resize me</p>
</div>
<svg class="svgAsset" style="position:absolute; width:0; height:0; visibility:hidden" overflow="visible">
<symbol viewBox="0 0 43 43" id="bubble">
<path d="M43 37 C38 37 34 29.6686 26 22.4215 C18 15.1745 7.5 8.34577 5 10.3566 C2.5 12.3674 5.5 15.8864 6 24.9351 C6.5 33.9838 5 37 5 37 z" />
</symbol>
<symbol id="bubbleOuter" overflow="visible">
<use class="bubble-bg" href="#bubble" x="40" y="-9" width="43" height="43" style="stroke-width:var(--stroke-width-bg); stroke:var(--stroke-color); fill:var(--bubble-bg)" />
<rect fill="#fff" stroke="#000" x="0" y="25" rx="8" ry="8" width="100%" height="100%" style="stroke-width:var(--stroke-width); stroke:var(--stroke-color); fill:var(--bubble-bg)" />
<use href="#bubble" x="40" y="-9" width="43" height="43" style="fill:var(--bubble-bg)" />
</symbol>
</svg>但是：這種方法需要對填充和邊距進行大量調整（取決于您的 svg 圖形、布局等）。
代碼筆示例
所以通常，更多基于 css 的布局概念將是更好的選擇（由于更高級的 css 布局模型，如 flex 或 grid）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/459895.html