时间戳

首页 > 解决方案 > 网页设计中 SVG 的 100% 宽度

html - 网页设计中 SVG 的 100% 宽度

问题描述

我创建了在背景中有图像的 SVG。

当我在浏览器中显示这个 svg 时，它没有全宽。

我需要全宽的 svg 我将其宽度设置为 100%，但它没有用。

这是我做的。

我创建的 SVG

代码

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1584 430.07">
            <defs>
              <style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:url(#linear-gradient);}
              </style>
              <clipPath id="clip-path" transform="translate(55.4 -492.58)">
                <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
              </clipPath>
              <linearGradient id="linear-gradient" x1="28.8" y1="212.55" x2="1564" y2="212.55" gradientUnits="userSpaceOnUse">
                <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
                <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
                <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
                <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
                <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
                <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
                <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
              </linearGradient>
            </defs>
            <title>Untitled-2</title>
            <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
              <rect class="cls-3" x="28.8" y="17.42" width="1535.2" height="390.25"/>
            </g>
          </svg>

这是我需要的最新PNG。 SVG的最新PNG

新的 SVG 代码

 <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 viewBox="0 0 1502.1 1320.3" style="enable-background:new 0 0 1502.1 1320.3;" xml:space="preserve">
    <style type="text/css">
    	.st0{clip-path:url(#SVGID_2_);fill:url(#SVGID_3_);}
    </style>
    <g>
    	<defs>
    		<path id="SVGID_1_" d="M0,26.9c134.3,4.6,658.6,50.7,732.3,57.7c0-2.2,769.8-27.1,769.8-24.9c0.2,13.7,0,1260.6,0,1260.6L0,1320.3
    			C0,1320.3,0,26.9,0,26.9z"/>
    	</defs>
    	<clipPath id="SVGID_2_">
    		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
    	</clipPath>
    	<g style="clip-path:url(#SVGID_2_);">
    		
    			<image style="overflow:visible;" width="1476" height="692" xlink:href="86E00C1C.jpg"  transform="matrix(1.4941 0 0 1.8796 -349.3057 19.601)">
    		</image>
    	</g>
    	
    		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="28.1822" y1="-181.5918" x2="1530.3799" y2="-181.5918" gradientTransform="matrix(1 0 0 -1 0 492)">
    		<stop  offset="0.14" style="stop-color:#662D91;stop-opacity:0.72"/>
    		<stop  offset="0.26" style="stop-color:#5F3194;stop-opacity:0.76"/>
    		<stop  offset="0.44" style="stop-color:#4D3D9C;stop-opacity:0.86"/>
    		<stop  offset="0.44" style="stop-color:#4C3E9C;stop-opacity:0.86"/>
    		<stop  offset="0.56" style="stop-color:#3051A8;stop-opacity:0.8"/>
    		<stop  offset="0.73" style="stop-color:#0071BC;stop-opacity:0.7"/>
    		<stop  offset="0.93" style="stop-color:#096BB8;stop-opacity:0.9"/>
    	</linearGradient>
    	<rect x="0" y="26.9" class="st0" width="1502.2" height="1293.4"/>
    </g>
    <title>backSVG</title>
    </svg>

标签： htmlcsssvgadobe-illustrator

解决方案

SVG 画布的宽度为 100%。问题是剪切路径小于 SVG 画布。我对您的代码进行了一些更改，现在剪切路径跨越了 SVG 画布的整个宽度。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1536 408">
        <defs>
          <style>
            .cls-1{fill:none;}
            .cls-2{clip-path:url(#clip-path);}
            .cls-3{fill:url(#linear-gradient);}
          </style>
          <clipPath id="clip-path" transform="translate(27 -492.58)">
            <path class="cls-1" d="M-27,636C84.25,567.54,343.82,469.55,512.2,527.7c68.3,23.59,137.95,66.7,411.2,84.26,194.2,14.95,352.85,3.84,585.6-30.37V900.5H-27Z"/>
          </clipPath>
          <linearGradient id="linear-gradient">
            <stop offset="0.14" stop-color="#662d91" stop-opacity="0.72"/>
            <stop offset="0.26" stop-color="#5f3194" stop-opacity="0.76"/>
            <stop offset="0.44" stop-color="#4d3d9c" stop-opacity="0.86"/>
            <stop offset="0.44" stop-color="#4c3e9c" stop-opacity="0.86"/>
            <stop offset="0.56" stop-color="#3051a8" stop-opacity="0.8"/>
            <stop offset="0.73" stop-color="#0071bc" stop-opacity="0.7"/>
            <stop offset="0.93" stop-color="#096bb8" stop-opacity="0.9"/>
          </linearGradient>
        </defs>
        <title>Untitled-2</title>
          <g class="cls-2"><image width="500" height="245" transform="scale(3.17 1.76)" xlink:href="data:image/jpeg;base64,/(**ByteCode for Image**)"/>
          <rect class="cls-3" width="1536" height="408"/>
        </g>
      </svg>

主要变化：
-viewBox现在的宽度是 1536 而不是 1584。如果 1584 的宽度很重要，则应该以不同的方式处理。
- 由于剪切路径从 x = -27 开始，因此剪切路径的变换现在transform="translate(27 -492.58)"不是transform="translate(55.4 -492.58)"

我希望这有帮助。

更新：我已经重新计算了 的d属性，clipPath现在您不需要翻译整个内容。

<clipPath id="clip-path" >
        <path class="cls-1" d="M0,143.42C111.25,74.96,370.82,-23.03,539.2,35.12c68.3,23.59 137.95,66.7 411.2,84.26 c194.2,14.95,352.85,3.84,585.6-30.37L1536,407.92L0,407.92L0,143.42Z"/>
</clipPath>

推荐阅读