从 adobe xd 导出时 SVG 文件会调整大小

Question

你好

我正在开发一个 React 应用程序，我想为我的 header 背景设置一个 SVG。但是当我从 adobe XD 导出它时，它的大小会改变。

这是 SVG 代码：

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1970.909" height="211.264" viewBox="0 0 1970.909 211.264">
      <defs>
        <filter id="Path_7" x="0" y="0" width="1970.909" height="211.264" filterUnits="userSpaceOnUse">
          <feOffset dy="6" input="SourceAlpha"/>
          <feGaussianBlur stdDeviation="8.5" result="blur"/>
          <feFlood flood-color="#396eb0" flood-opacity="0.278"/>
          <feComposite operator="in" in2="blur"/>
          <feComposite in="SourceGraphic"/>
        </filter>
      </defs>
      <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
        <path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
      </g>
    </svg>

This is a link to image

编辑：我可以在 adobe illustrator 中调整我的 SVG 大小，一切都很好，但我想直接从 adobe XD 导出和使用

编辑 2：如果我从 svg 中删除宽度 a 和高度，它将不再适合屏幕，就像它有边距一样。

Answer 1

如果从 svg 元素和 filter 元素中删除 width 和 height 属性，那么它将正常缩放：

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1970.909 211.264">
      <defs>
        <filter id="Path_7" x="0" y="0" filterUnits="userSpaceOnUse">
          <feOffset dy="6" input="SourceAlpha"/>
          <feGaussianBlur stdDeviation="8.5" result="blur"/>
          <feFlood flood-color="#396eb0" flood-opacity="0.278"/>
          <feComposite operator="in" in2="blur"/>
          <feComposite in="SourceGraphic"/>
        </filter>
      </defs>
      <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#Path_7)">
        <path id="Path_7-2" data-name="Path 7" d="M0,0,1919.909.341V159.89s-164.931-36.264-428.15-36.264-349.451,32.555-624.725,36.264-259.615-21.429-476.374-21.429S0,159.89,0,159.89Z" transform="translate(25.5 19.5)" fill="#f05454"/>
      </g>
    </svg>

Answer 2

我觉得这个 SVG 可以优化一下。路径本身相当简单。所以，在这个例子中，我缩小了路径。现在路径中的数字更容易概览。那么 viewBox 也可以很简单。而且现在滤镜也更加可控

PS：在您的代码中，您有两个具有相同 ID 的元素。应该避免这种情况。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 5">
  <defs>
    <filter id="Path_7" filterUnits="userSpaceOnUse">
      <feOffset dy=".5" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation=".2" result="blur"/>
      <feFlood flood-color="#396eb0" flood-opacity=".6"/>
      <feComposite operator="in" in2="blur"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <path filter="url(#Path_7)" data-name="Path 7" d="M 0 0 L 36 0 V 3 s -3 -0.5 -7 -0.5 s -7 0.5 -11 0.5 s -7 -0.5 -11 -0.5 S 0 3 0 3 Z" fill="#f05454"/>
</svg>

从 adobe xd 导出时 SVG 文件会调整大小

SVG file resizes when exporting from adobe xd

html

xml

svg

reactjs