html - 如何在浏览器放大/缩小期间保持 SVG 大小相同-6ren

html - 如何在浏览器放大/缩小期间保持 SVG 大小相同

转载作者：行者123 更新时间：2023-11-28 14:20:01

我有一个以 SVG 图像为背景的着陆页。我想将其大小锁定到位，这样如果浏览器放大或缩小，它就不会改变。缩小后看起来很糟糕。k

这是我正在谈论的功能的 Twitter 的 svg 示例。如果您在浏览器中打开此 svg 代码，则如果您使用命令 &+/- 并缩小，twitter 鸟不会改变大小。

<svg class="twitterIcon-bird" viewBox="0 0 1208 982" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
    <title>bird</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Final-Horizon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-286.000000, -117.000000)" fill-rule="nonzero" fill="#1B95E0">
            <path d="M1493.75308,233.195911 C1449.31783,252.922544 1401.56126,266.207828 1351.43951,272.19627 C1402.61804,241.549536 1441.92034,192.987798 1460.3889,135.116296 C1412.53168,163.498493 1359.49119,184.130942 1303.02874,195.252335 C1257.88897,147.093181 1193.42514,117 1122.16771,117 C962.190754,117 844.636121,266.258151 880.768067,421.202806 C674.896491,410.886582 492.324484,312.253414 370.089808,162.341063 C305.17308,273.705962 336.423691,419.391176 446.731805,493.16476 C406.171431,491.856361 367.925917,480.734968 334.561738,462.165765 C331.844294,576.95263 414.122472,684.342008 533.287442,708.245454 C498.413572,717.706186 460.218381,719.9204 421.368991,712.47259 C452.871217,810.904465 544.358512,882.514158 652.854997,884.52708 C548.686294,966.201382 417.443793,1002.68559 286,987.186091 C395.653915,1057.48739 525.940278,1098.50067 665.838342,1098.50067 C1125.89162,1098.50067 1385.81015,709.956437 1370.10936,361.469352 C1418.52012,326.494836 1460.53987,282.864756 1493.75308,233.195911 Z" id="bird"></path>
        </g>
    </g>
</svg>

这是我希望表现类似的图像的 svg 信息。您可能需要将其复制并粘贴到文件中并在浏览器中查看。这是一个具有多层的曲面图像。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
        <linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
    </defs>
    <g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Landing-page---v2">
            <g id="Bitmap" transform="translate(-12.000000, -25.000000)">
                <path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
                <mask id="mask-4" fill="white">
                    <use xlink:href="#path-3"></use>
                </mask>
                <use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
                <mask id="mask-7" fill="white">
                    <use xlink:href="#path-6"></use>
                </mask>
                <use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
            </g>
        </g>
    </g>
</svg>

我可以对我的 svg 文件做哪些更改以使其表现得像 Twitter svg？

最佳答案

这将为您提供 viewBox，现在我将您的标记放在 viewbox 中 - 因为它偏离了中心。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5000 5000">
    <defs>
        <linearGradient x1="18.4268546%" y1="27.9722359%" x2="82.7977891%" y2="77.3056038%" id="linearGradient-1">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="18.4268546%" y1="28.295015%" x2="82.7977891%" y2="76.9054869%" id="linearGradient-2">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <path d="M0.882548395,15.7999936 L1.20671504,819.366633 C336.735572,860.919994 594.34158,794.683198 774.024741,620.656245 C932.62388,467.049615 996.276998,527.683301 1151.1184,531.228148 C1305.9598,534.772995 1508.44994,684.094916 1631.51564,783.962916 C1713.55944,850.541583 1650.01507,594.487275 1440.88255,15.7999936 L0.882548395,15.7999936 Z" id="path-3"></path>
        <linearGradient x1="10.0537047%" y1="28.3217065%" x2="117.215768%" y2="106.344139%" id="linearGradient-5">
            <stop stop-color="#1E87F0" offset="0%"></stop>
            <stop stop-color="#1E3E5C" offset="100%"></stop>
        </linearGradient>
        <path d="M12.04293,25 L6.90201099,735.285212 C159.518234,768.654318 306.462792,773.140482 447.735683,748.743705 C773.312884,692.518943 874.037615,533.915834 1153.33439,533.901355 C1339.53225,533.891702 1497.8173,596.686321 1628.18954,722.285212 L1464.16913,25 L12.04293,25 Z" id="path-6"></path>
    </defs>
    <g id="Landing-page" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Landing-page---v2">
            <g id="Bitmap" transform="translate(-12.000000, -25.000000)">
                <path d="M60.8501735,0.107667822 L60.8501735,687.900102 C293.733255,762.384295 480.221381,787.428003 620.314551,763.031226 C943.172971,706.806464 1004.024,482.419288 1280.98847,482.404809 C1557.95294,482.39033 1520.08109,690.064545 1643.14678,789.932545 C1725.19058,856.511212 1677.75838,593.236253 1500.85017,0.107667822 L60.8501735,0.107667822 Z" id="Mask-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.12"></path>
                <mask id="mask-4" fill="white">
                    <use xlink:href="#path-3"></use>
                </mask>
                <use id="Mask-Copy-2" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.12" xlink:href="#path-3"></use>
                <mask id="mask-7" fill="white">
                    <use xlink:href="#path-6"></use>
                </mask>
                <use id="Mask" fill="url(#linearGradient-5)" fill-rule="nonzero" xlink:href="#path-6"></use>
            </g>
        </g>
    </g>
</svg>

关于html - 如何在浏览器放大/缩小期间保持 SVG 大小相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55316723/

文章推荐： javascript - 仅在第一个时才考虑动态添加的样式表

文章推荐： html - Explorer 9 中的背景位置

文章推荐： css - 仅在透明页眉的顶部添加渐变色？

文章推荐： css - 如何更改 Select NoUISlider JQuery 插件的句柄？

java - 如何将 IE 浏览器 session 切换到 Chrome 浏览器 session ？
我的“登录”是在 IE 浏览器中进行的，登录后，如果我单击链接，它们就会在 Chrome 浏览器中打开。如何在同一个测试用例中将我当前的浏览器从 IE 切换到 Chrome。如果我创建一个 chrom
css - 在 Firefox 中，与 css 内容属性一起使用的特殊字符比在 Firefox 中更薄。浏览器/浏览器
您好，我不明白在 Firefox 的内容属性中使用的特殊字符的不同显示行为。我已经剥离了一切并创造了一支笔: http://codepen.io/rpkoller/pen/Fbgav 在其“基本形式”
java - Spring Data REST - HAL 浏览器 - 返回 HAL 浏览器 HTML 而不是 API 的根
我正在研究 Spring Data REST，特别是 HAL 浏览器。我一直在关注 http://docs.spring.io/spring-data/rest/docs/current/refere
Jquery if 浏览器
我正在使用工具提示，在 ie 上出现定位错误。我放了jquery浏览器代码我的工具提示 $('.tooltip').tooltip({ position: "bottom center"
javascript - bluebirdjs协程错误处理(浏览器)
我应该如何处理蓝鸟协程中的错误？我使用co in节点已有一段时间，它具有出色的捕获功能。 co(function*() { return new Promise(function(resol
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
javascript - 浏览器/JavaScript同源策略如何应用于二级域名？
我有一些 JavaScript 在同一域上的两个独立服务器之间共享请求。 .com 是 JavaScript 中域的要求吗？在这种情况下，两台服务器都位于 .abc.tyy 域上，tyy 通常是 .
JavaFX WebView 浏览器
package webviewbrowser; import java.util.List; import javafx.application.Application; import javafx.
构建以前版本的 Chromium 浏览器
我正在尝试构建仍支持 NPAPI 的先前版本的 Chromium 浏览器。我已经获得了代码，并且可以使用 stand build 命令在我的 mac 上构建最新版本的 Chromium gclient
python - Python 浏览器
我环顾四周，找不到 browscap 的 Python 等效项(我在 PHP 中使用它来检测给定的用户代理字符串是什么浏览器。我希望我不必自己写......:P 最佳答案看看这个，它应该做你想要的
javascript - 浏览器 - 文件编写器扩展？
是否有任何 chrome 或 firefox 扩展允许 javascript 在客户端 PC 中创建写入文件？最佳答案你想做什么？ HTML5 有一个 File API .这是最好的解决方案，因为
javascript - 浏览器/选项卡关闭检测时发出警报
当我点击链接或刷新或关闭标签页时，我有这段代码会发出警报。但我需要在关闭窗口(选项卡)上仅发出警报。怎么做？我的网站上有很多外部和内部链接。
javascript - Angular +浏览器
我目前正在尝试使用 Browserify + Angular，但我遇到了一个奇怪的问题。我在我的 Controller 的子目录中创建了一个名为 controllers/start-controlle
testing - 响应式布局针对哪些设备/浏览器
我正在为客户(项目已被接受，但现在是解释不同功能的问题)写一份详细的估算，以开发一个响应式布局的网站。这不是我第一次进行此类开发，但这是一个关键客户，必须铺平道路。布局将从 300px 宽度调整到
css - 浏览器/网络邮件客户端中的默认打印样式
我在时事通讯上设计了一些黑底白字。由于时事通讯在打印时看起来不错且可读。我需要使布局和文本与浏览器中的内容相似。通常情况下，黑色文本和无背景颜色是浏览器/网络邮件客户端的默认打印样式吗？最佳答案
Android 浏览器 - 无法将输入文本从白色更改为黑色
我有一个使用 GWT/mGWT 构建的移动友好网络应用程序。该应用程序有白色输入文本框和深灰色输入文本。但是，在 Android 浏览器上，文本显示为白色，因此是不可见的。我尝试的所有 CSS 都无法
javascript - 浏览器 - 强制重新加载删除cookie？
我创建了一个带有选择输入的页面来更改正在使用的 jQuery UI 主题。当主题更改时，它会存储在 cookie 中。页面加载时，如果 cookie 存在，则恢复主题，否则加载默认主题。当我使用 F
css - 浏览器/渲染引擎如何知道在哪里连接单词？
在我的 CSS 中，我使用了以下代码片段: word-break: break-word; -webkit-hyphens: auto; hyphens: auto; 渲染引擎如何知道在所有不同语言中
CSS WordPress 浏览器
我的网络浏览器 Safari 有问题，我在 Chrome、FireFox 中测试了我的网站。 Safari 版本也是正确的，但是，当需要在 1920x1080 或更高分辨率下对其进行测试时，它无法正常
PHP headless 浏览器？
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在浏览器放大/缩小期间保持 SVG 大小相同