我需要一些有关在 HTML 视图框中缩放 SVG 的帮助。
我正在使用网站的 HTML 模板,并希望将模板的标准 SVG 图像更改为另一个图像。我无法让路径 d="something,something" 的新 SVG 正确缩放。
我希望新的 SVG 图像能够正确地适合 91 x 91 视图框的中心。
我在线查看了 SVG viewbox 系统,但无法理解它是如何工作的。我有一些 python 编码经验,但没什么太严重的,没有 HTML 经验。
请帮忙,解释如下。
标准 SVG 图像的代码如下:
<div id="section-publications" class="o-container wow1 fadeIn" data-contentPosition="4">
<div class="c-section-heading">
<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" viewBox="0 0 91 91">
<rect class="svg-icon__border" x="0.5" y="0.5" width="90" height="90"/>
<path class="svg-icon__item" d="M441.844,1714.1a3.587,3.587,0,0,1-1.175,2.18,4.8,4.8,0,0,1-2.425,1.12,9.54,9.54,0,0,1-1.5.1,12.291,12.291,0,0,1-1.5,0h-30a5.209,5.209,0,0,1-2.25-.45,3.054,3.054,0,0,1-1.65-1.7,4.191,4.191,0,0,1-.05-2.65,14.023,14.023,0,0,1,.75-1.75l10.95-20.3a2.556,2.556,0,0,0,.25-1.05v-4.65a0.605,0.605,0,0,0-.075-0.35,0.574,0.574,0,0,0-.375-0.15,3.05,3.05,0,0,1-2.175-.97,3.2,3.2,0,0,1-.875-2.28l-0.05-1.65c0.033-.27.067-0.53,0.1-0.8a3.232,3.232,0,0,1,1.125-1.87,3.119,3.119,0,0,1,2.075-.73h16.25a3.213,3.213,0,0,1,2.4.98,3.157,3.157,0,0,1,.9,2.42c0-.5.017-0.12,0.05,1.15a6.137,6.137,0,0,1-.1,1.2,3.257,3.257,0,0,1-1.075,1.8,3.076,3.076,0,0,1-1.925.75,0.574,0.574,0,0,0-.375.15,0.605,0.605,0,0,0-.075.35v4.85a1.7,1.7,0,0,0,.3.8l11.8,20.4a4.6,4.6,0,0,1,.7,3.1h0Zm-2.425.05a4.446,4.446,0,0,0-.675-2.25l-11.2-20.85a1.941,1.941,0,0,1-.25-0.7q0.05-3.645,0-7.2a0.379,0.379,0,0,1,.1-0.32,0.5,0.5,0,0,1,.3-0.08h1.55a1.474,1.474,0,0,0,1.125-.45,1.8,1.8,0,0,0,.475-1.15v-1.65a1.552,1.552,0,0,0-.45-1.15,1.622,1.622,0,0,0-1.2-.45h-16.05a1.722,1.722,0,0,0-1.25.43,1.652,1.652,0,0,0-.45,1.27v1.6a1.755,1.755,0,0,0,.475,1.1,1.474,1.474,0,0,0,1.125.45,9.973,9.973,0,0,0,1.375,0,0.519,0.519,0,0,1,.475.08,0.781,0.781,0,0,1,.1.47q-0.05,3.345,0,6.65a2.09,2.09,0,0,1-.3,1.1l-11.1,20.7a6.541,6.541,0,0,0-.7,1.7,1.652,1.652,0,0,0,1.45,2.2,5.753,5.753,0,0,0,1.3.1h31.25a3.855,3.855,0,0,0,1.5-.25A1.369,1.369,0,0,0,439.419,1714.15Zm-22.2-40.52a1.953,1.953,0,0,1-.575-1.43,2.015,2.015,0,0,1,.575-1.45,1.948,1.948,0,0,1,1.425-.62,1.833,1.833,0,0,1,1.45.6,2.031,2.031,0,0,1,.6,1.47,2.049,2.049,0,0,1-2.05,2.05A2.115,2.115,0,0,1,417.219,1673.63Zm5.05-3.13a1.616,1.616,0,0,1-.525-1.22,1.8,1.8,0,0,1,1.75-1.78,1.734,1.734,0,0,1,1.225.5,1.65,1.65,0,0,1,.525,1.25,1.709,1.709,0,0,1-1.75,1.75A1.734,1.734,0,0,1,422.269,1670.5Zm4.625,23.45,10.3,18.8a3.751,3.751,0,0,1,.45.88,0.2,0.2,0,0,1-.175.27,6.171,6.171,0,0,1-.975.05h-31.1a1.131,1.131,0,0,1-.725-0.12,1.032,1.032,0,0,1,.225-0.68q0.649-1.245,2.6-4.8l4.85-8.85a0.933,0.933,0,0,1,.325-0.4,0.6,0.6,0,0,1,.525.05,19.047,19.047,0,0,0,3.775.75,4.321,4.321,0,0,0,3.775-1.3c0.3-.3.933-0.98,1.9-2.05a13.925,13.925,0,0,1,3.6-2.8,0.712,0.712,0,0,1,.4-0.07,0.463,0.463,0,0,1,.3.27h-0.05Zm-2.35,15.13a1.943,1.943,0,0,0,.2-1.6,2.054,2.054,0,0,0-1.025-1.25,2.132,2.132,0,0,0-2.875.8,2.1,2.1,0,0,0-.175,1.6,2,2,0,0,0,1,1.3,2.05,2.05,0,0,0,1.625.17A2.189,2.189,0,0,0,424.544,1709.08Zm5.025-4.8a2.386,2.386,0,0,0,.2-1.85,2.476,2.476,0,0,0-1.15-1.5,2.325,2.325,0,0,0-1.85-.28,2.352,2.352,0,0,0-1.5,1.18,2.394,2.394,0,0,0-.25,1.9,2.454,2.454,0,0,0,1.175,1.5,2.3,2.3,0,0,0,1.9.22A2.389,2.389,0,0,0,429.569,1704.28Zm-10.725-18.08a3.5,3.5,0,0,1-1.05-2.57,3.465,3.465,0,0,1,1.075-2.58,3.682,3.682,0,0,1,5.15,0,3.622,3.622,0,0,1,0,5.15A3.713,3.713,0,0,1,418.844,1686.2Zm-0.7,7.53a2.643,2.643,0,0,1,1.825-4.53,2.568,2.568,0,0,1,1.85.75,2.477,2.477,0,0,1,.775,1.85,2.62,2.62,0,0,1-.75,1.88,2.493,2.493,0,0,1-1.85.77A2.435,2.435,0,0,1,418.144,1693.73Z" transform="translate(-375.5 -1649.5)"/>
</svg>
</div>
Run Code Online (Sandbox Code Playgroud)
看起来像这样:
我想将 SVG 更改为不同的内容,例如握手(或至少是其他内容......)。我有一个 SVG 握手文件,如下所示:
当我生成 SVG 文件内部的查看时,我找到了一条指示握手图像坐标的路径。当我将路径复制并粘贴到代码中并删除转换元素时,我得到以下内容:
<svg class="c-section-heading__icon svg-icon" xmlns="http://www.w3.org/2000/svg" width="91" height="91" …Run Code Online (Sandbox Code Playgroud)