为什么 Safari 呈现 svg 与 Chrome 不同?

Why does Safari render svg differently than Chrome?

提问人:JBrown 提问时间:11/10/2023 更新时间:11/10/2023 访问量:23

问:

我有这个svg元素:

<svg xmlns="http://www.w3.org/2000/svg" width="882.194" height="145.801" viewBox="-1 -1 884.194 147.801">
    <defs>
        <style>
        .cls-1 {
            stroke: #272727;
        }
        </style>
    </defs>
    <path id="Social" class="cls-1"
        d="M420.4,2.9a74.445,74.445,0,0,1-28.792-5.635A70.438,70.438,0,0,1,379.3-9.367a69.839,69.839,0,0,1-10.6-8.807,70.266,70.266,0,0,1-8.657-10.7A71.475,71.475,0,0,1,353.562-41.2,74.981,74.981,0,0,1,348.1-69.6V-70a75.369,75.369,0,0,1,5.4-28.29,71.8,71.8,0,0,1,6.445-12.381,70.325,70.325,0,0,1,8.677-10.8,69.912,69.912,0,0,1,23.243-15.671A77.132,77.132,0,0,1,421.6-142.9c12.593,0,23.329,1.976,32.822,6.04a66.394,66.394,0,0,1,12.27,6.876,83.186,83.186,0,0,1,10.459,8.827l.334.329-.307.355L457.243-97.486l-.379-.344a67.143,67.143,0,0,0-16.575-11.492A43.809,43.809,0,0,0,421.4-113.5a38.915,38.915,0,0,0-16.095,3.393,38.467,38.467,0,0,0-12.686,9.243,42.389,42.389,0,0,0-8.327,13.7A47.391,47.391,0,0,0,381.3-70.4v.4a48.573,48.573,0,0,0,2.938,16.827,42.821,42.821,0,0,0,8.235,13.839,38.173,38.173,0,0,0,12.666,9.378A38.885,38.885,0,0,0,421.4-26.5a48.59,48.59,0,0,0,10.843-1.144,41.613,41.613,0,0,0,9.212-3.255c5.085-2.488,9.993-6.038,16.408-11.871l.355-.322L478.494-22.61l-.329.351c-8,8.555-15.666,14.4-24.127,18.386C444.37.685,433.367,2.9,420.4,2.9Zm1.2-144.8a76.136,76.136,0,0,0-29.355,5.677,68.919,68.919,0,0,0-22.913,15.448,69.332,69.332,0,0,0-8.553,10.65,70.786,70.786,0,0,0-6.355,12.209A74.373,74.373,0,0,0,349.1-70v.4a73.987,73.987,0,0,0,5.388,28.021,70.471,70.471,0,0,0,6.384,12.151,69.247,69.247,0,0,0,8.534,10.551,68.829,68.829,0,0,0,10.45,8.68,69.43,69.43,0,0,0,12.136,6.538A73.449,73.449,0,0,0,420.4,1.9c12.816,0,23.68-2.184,33.212-6.677,8.227-3.878,15.7-9.544,23.494-17.814L458.181-41.708C451.864-36,446.975-32.487,441.895-30a42.605,42.605,0,0,1-9.431,3.332A49.571,49.571,0,0,1,421.4-25.5a39.878,39.878,0,0,1-16.676-3.545,39.167,39.167,0,0,1-13-9.622A43.817,43.817,0,0,1,383.3-52.827,49.574,49.574,0,0,1,380.3-70v-.4a48.386,48.386,0,0,1,3.057-17.114,43.383,43.383,0,0,1,8.523-14.023,39.463,39.463,0,0,1,13.014-9.482A39.909,39.909,0,0,1,421.4-114.5a44.789,44.789,0,0,1,19.311,4.272,67.5,67.5,0,0,1,16.445,11.315l18.958-21.859a81.653,81.653,0,0,0-10-8.394,65.413,65.413,0,0,0-12.087-6.774C444.662-139.951,434.055-141.9,421.6-141.9ZM232.8,2.9a79.472,79.472,0,0,1-30.007-5.69,73.1,73.1,0,0,1-12.73-6.68,71.214,71.214,0,0,1-10.915-8.85,70.56,70.56,0,0,1-8.876-10.73,70.856,70.856,0,0,1-6.615-12.318A73.159,73.159,0,0,1,158.1-69.6V-70a72.939,72.939,0,0,1,5.62-28.3,71.565,71.565,0,0,1,6.679-12.382,71.581,71.581,0,0,1,8.949-10.8,72.233,72.233,0,0,1,10.988-8.923,73.8,73.8,0,0,1,12.794-6.744A79.216,79.216,0,0,1,233.2-142.9a79.472,79.472,0,0,1,30.007,5.69,73.1,73.1,0,0,1,12.73,6.68,71.212,71.212,0,0,1,10.915,8.85,70.56,70.56,0,0,1,8.876,10.73,70.858,70.858,0,0,1,6.615,12.318A73.159,73.159,0,0,1,307.9-70.4v.4a72.938,72.938,0,0,1-5.62,28.3A71.564,71.564,0,0,1,295.6-29.322a71.581,71.581,0,0,1-8.949,10.8A72.232,72.232,0,0,1,275.664-9.6,73.8,73.8,0,0,1,262.87-2.853,79.216,79.216,0,0,1,232.8,2.9Zm.4-144.8a78.223,78.223,0,0,0-29.692,5.679,72.814,72.814,0,0,0-12.62,6.652,71.238,71.238,0,0,0-10.835,8.8,70.583,70.583,0,0,0-8.824,10.651,70.577,70.577,0,0,0-6.585,12.208A71.945,71.945,0,0,0,159.1-70v.4a72.163,72.163,0,0,0,5.48,27.849A69.848,69.848,0,0,0,171.1-29.608a69.549,69.549,0,0,0,8.75,10.577A70.637,70.637,0,0,0,203.169-3.717,78.476,78.476,0,0,0,232.8,1.9a78.223,78.223,0,0,0,29.692-5.679,72.813,72.813,0,0,0,12.62-6.652,71.238,71.238,0,0,0,10.835-8.8,70.583,70.583,0,0,0,8.824-10.651,70.578,70.578,0,0,0,6.585-12.208A71.945,71.945,0,0,0,306.9-70v-.4a72.162,72.162,0,0,0-5.48-27.849,69.849,69.849,0,0,0-6.521-12.144,69.549,69.549,0,0,0-8.75-10.577,70.637,70.637,0,0,0-23.317-15.314A78.476,78.476,0,0,0,233.2-141.9ZM66.6,2.5A91.874,91.874,0,0,1,50.65,1.1,90.813,90.813,0,0,1,35.077-3.106,87.754,87.754,0,0,1,6.867-20.027l-.361-.322L25.335-42.9l.384.316a80.916,80.916,0,0,0,19.5,12.326A54.7,54.7,0,0,0,67.2-25.7c6.079,0,11.11-1.191,14.551-3.443a11.534,11.534,0,0,0,3.828-3.979A10.653,10.653,0,0,0,86.9-38.4v-.4a10.481,10.481,0,0,0-1.059-5A11.466,11.466,0,0,0,81.8-47.958a40.32,40.32,0,0,0-8.49-3.956c-3.644-1.306-8.3-2.681-14.234-4.2-14.591-3.725-25.949-7.492-33.959-13.766a31.179,31.179,0,0,1-9.488-11.91C13.389-86.75,12.3-92.51,12.3-99.4v-.4a41.722,41.722,0,0,1,3.68-17.518,38.882,38.882,0,0,1,10.271-13.488,46.776,46.776,0,0,1,15.669-8.647A62.979,62.979,0,0,1,61.8-142.5a86.315,86.315,0,0,1,28.49,4.653,80.153,80.153,0,0,1,23.823,13.257l.363.291-16.549,24-.412-.286a90.616,90.616,0,0,0-18.322-10.07A49.072,49.072,0,0,0,61.4-114.3c-5.483,0-10.024,1.195-13.131,3.454a10.775,10.775,0,0,0-3.273,3.7,9.692,9.692,0,0,0-1.1,4.543v.4c0,4.662,1.62,7.436,5.779,9.895,4.626,2.735,12.63,5.1,24.045,8.021a131.529,131.529,0,0,1,18.993,6.279,53.982,53.982,0,0,1,14.06,8.452,32.078,32.078,0,0,1,8.738,11.74A39.748,39.748,0,0,1,118.5-41.8v.4a44.656,44.656,0,0,1-3.83,18.718,38.089,38.089,0,0,1-10.73,13.8A47.97,47.97,0,0,1,87.517-.394,71.955,71.955,0,0,1,66.6,2.5ZM7.895-20.452A86.767,86.767,0,0,0,35.423-4.044,89.8,89.8,0,0,0,50.825.117,90.869,90.869,0,0,0,66.6,1.5,70.962,70.962,0,0,0,87.226-1.35,46.979,46.979,0,0,0,103.31-9.663,37.1,37.1,0,0,0,113.761-23.1,43.665,43.665,0,0,0,117.5-41.4v-.4a38.775,38.775,0,0,0-2.9-15.617A31.1,31.1,0,0,0,106.123-68.8a53.012,53.012,0,0,0-13.8-8.291,130.547,130.547,0,0,0-18.846-6.228c-11.5-2.946-19.575-5.333-24.3-8.128A12.683,12.683,0,0,1,44.28-96.07a12.087,12.087,0,0,1-1.38-6.13v-.4a10.682,10.682,0,0,1,1.21-5.007,11.763,11.763,0,0,1,3.571-4.047C50.96-114.039,55.7-115.3,61.4-115.3a50.062,50.062,0,0,1,18.157,3.709A90.983,90.983,0,0,1,97.672-101.7l15.451-22.4A79.1,79.1,0,0,0,89.96-136.9a85.318,85.318,0,0,0-28.16-4.6,61.98,61.98,0,0,0-19.564,3,45.781,45.781,0,0,0-15.337,8.46A37.891,37.891,0,0,0,16.889-116.9,40.729,40.729,0,0,0,13.3-99.8v.4c0,12.958,3.951,22.087,12.433,28.731,7.872,6.166,19.122,9.89,33.59,13.584,12,3.077,18.886,5.557,23.027,8.292a12.427,12.427,0,0,1,4.377,4.533A11.433,11.433,0,0,1,87.9-38.8v.4a11.65,11.65,0,0,1-5.6,10.093c-3.6,2.359-8.825,3.607-15.1,3.607a55.675,55.675,0,0,1-22.372-4.641A81.339,81.339,0,0,1,25.466-41.5ZM888.7.5H787.1v-141h31.8v112h69.8ZM788.1-.5h99.6v-27H817.9v-112H788.1ZM746.756.5H713.464l-12.8-31.4H642.136L629.336.5H596.844l.3-.7,60.129-141.3h29.061Zm-32.62-1h31.108l-59.574-140H657.931L598.356-.5h30.308l12.8-31.4h59.872ZM555.1.5H523.3v-141h31.8Zm-30.8-1h29.8v-139H524.3Zm-291.1-25a42.813,42.813,0,0,1-17.288-3.542,41.148,41.148,0,0,1-13.577-9.616,43.7,43.7,0,0,1-8.864-14.161A47.287,47.287,0,0,1,190.3-70v-.4a45.206,45.206,0,0,1,11.835-31.142,40.288,40.288,0,0,1,13.441-9.479A43,43,0,0,1,232.8-114.5a42.813,42.813,0,0,1,17.288,3.542,41.149,41.149,0,0,1,13.577,9.616,43.7,43.7,0,0,1,8.864,14.161A47.287,47.287,0,0,1,275.7-70v.4a45.206,45.206,0,0,1-11.835,31.142,40.288,40.288,0,0,1-13.441,9.479A43,43,0,0,1,233.2-25.5Zm-.4-88a42.009,42.009,0,0,0-16.826,3.4,39.294,39.294,0,0,0-13.109,9.246A44.211,44.211,0,0,0,191.3-70.4v.4a46.29,46.29,0,0,0,3.1,16.819,42.706,42.706,0,0,0,8.661,13.839,40.152,40.152,0,0,0,13.248,9.384A41.819,41.819,0,0,0,233.2-26.5a42.009,42.009,0,0,0,16.826-3.4,39.3,39.3,0,0,0,13.109-9.246A44.211,44.211,0,0,0,274.7-69.6V-70a46.289,46.289,0,0,0-3.1-16.819,42.706,42.706,0,0,0-8.661-13.839,40.152,40.152,0,0,0-13.248-9.384A41.819,41.819,0,0,0,232.8-113.5ZM690.745-58.1h-38.69L671.4-105.319Zm-37.2-1h35.71L671.4-102.681Z"
        transform="translate(-6.506 142.9)" />
</svg>

svg 在 Chrome 和 Firefox 上正确呈现,但在 Safari 路径中的点上有一堆点。请参阅下面的图片以供参考。有谁知道如何解决这个问题?

svg on SafariSafari 浏览器

svg on Chrome

HTML SVG 跨浏览器

评论

0赞 Robert Longson 11/10/2023
您可以在此处报告 webkit 错误
0赞 Danny '365CSI' Engelman 11/10/2023
我将首先删除所有精度(您现在正在将 1000 个“像素”塞进 1 个)jakearchibald.github.io/svgomg 然后通过更改坐标来删除translate<path d="Mx y..."

答: 暂无答案