如何使路徑元素與svg元素的寬度相同？-有解無憂

我的網站上有一個 V 形 svg，但定位使頁面比我需要的更寬。所以我在查看元素并注意到路徑比實際的 svg 元素要細得多。

如何使路徑元素與 svg 元素的寬度相同？

我希望整個 svg 元素的寬度僅為 V 形尺寸所需的寬度，我可以提供 svg 代碼。

<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 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
    c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
    c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
    C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>

uj5u.com熱心網友回復：

您可以通過資料獲取BBox并重新定義viewBox屬性：

const svg = document.querySelector('svg');
const path = svg.querySelector('path');

const box = path.getBBox();
svg.setAttribute('viewBox', `${box.x} ${box.y} ${box.width} ${box.height}`);

<svg viewBox="0 0 512.001 512.001" style="background: gray; width: 100px">
    <path style="fill:#FFF;" d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
    c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
    c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
    C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>

uj5u.com熱心網友回復：

您要么必須調整路徑以適應當前路徑，viewbox要么將視圖框調整為當前路徑。

后者大概是這樣的：

viewBox="117 0 280 512.001"

svg {
  border: 1px solid red;
  height: 90vh;
  margin: 4px;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="117 0 280 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path d="M388.819,239.537L156.092,6.816c-9.087-9.089-23.824-9.089-32.912,0.002
    c-9.087,9.089-9.087,23.824,0.002,32.912l216.27,216.266L123.179,472.272c-9.087,9.089-9.087,23.824,0.002,32.912
    c4.543,4.544,10.499,6.816,16.455,6.816c5.956,0,11.913-2.271,16.457-6.817L388.819,272.45c4.366-4.364,6.817-10.283,6.817-16.455
    C395.636,249.822,393.185,243.902,388.819,239.537z"/>
</svg>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343500.html

標籤：html css svg

上一篇：帶有CSS變數的SVG半徑或位置

下一篇：如何在沒有背景關系管理器的情況下在pycairo中保存svg