主页 / 问题 / 1155863
Accepted
Floyat
Asked:2020-07-22 16:50:03 +0000 UTC2020-07-22 16:50:03 +0000 UTC

如果 svg 本身没有，则为 svg 定义 viewBox

  • 772

有两个svg。

在第一种情况下，svg 有一个给定的 viewBox="0 0 57.21 126.47" https://jsfiddle.net/5jaLdyex/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.21 126.47">...

在第二种情况下，svg viewBox 被移除。svg 的其余部分保持不变。 https://jsfiddle.net/5jaLdyex/1/

<svg xmlns="http://www.w3.org/2000/svg">...

在第一种和第二种情况下也缺少宽度/高度。

问题：如何确定 svg #2 的比例？我确定可以这样做，因为如果您将此 svg 加载到画布构造函数中，那么即使未设置宽度/高度/视图框，它也会确定 57.21 126.47 的大小。

javascript

2 个回答

  1. Best Answer

    wdth height使用JS方法可以找到值getBBox()

    const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
console.log(width);

    您可以将viewBox选项的值设置为等于自定义视口（viewport）的高度和宽度

    <script>
const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
svg.setAttribute("viewBox", `${x} ${y} ${width} ${height}`); 
</script>

    值将与您的第一个示例相同viewBox="0 0 57.21 126.47"
    。这就是您的图像在矢量编辑器中的绘制方式。

    减少它，例如10倍，需要在svg header中增加viewBox 10倍viewBox="0 0 572.1 1264.7"
    或者使用JS

    <script>
const svg = document.querySelector("svg");
const {x, y, width, height} = svg.getBBox();
<!-- Увеличиваем viewBox - уменьшаем изображение -->
svg.setAttribute("viewBox", `${x} ${y} ${width * 10} ${height * 10}`);
</script>

    另一种调整 SVG 大小的方法

    由于您已经知道大小，因此请viewBox="0 0 57.21 126.47"明确指定它，而无需在 SVG 标头中指定宽度、高度。
    将 SVG 包裹在 div 中并以相对单位设置宽度、高度

    <style>
.container {
width:10vw;
height:10vh;
}
<div class="container"> 
<svg viewBox="0 0 57.21 126.47">
</svg>
</div>
    • 2

  2. https://svgwg.org/specs/integration/#svg-css-sizing

    如果没有宽度/高度/视图框，那么无论内容如何，​​SVG 都将为 300x150px。

    • 0

相关问题