你好
我正在開發一個 React 應用程式，我想為我的標題背景設定一個 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>
uj5u.com熱心網友回復：
我覺得這個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>uj5u.com熱心網友回復：
如果從元素和元素中洗掉width和height屬性，則它將正常縮放：svgfilter
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/388448.html