我正在尝试修改svg以使其保持的图像占据svg的整个宽度和高度。我怎样才能做到这一点?
我正在尝试将宽度和高度修改为100%,x,y为“0”并设置此svg属性preserveAspectRatio =“xMidYMid meet”。
这是最初的svg:
<?xml version="1.0" encoding="UTF-8"?>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1512" height="1063" viewBox="0 0 1512 1063" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve"><desc>Created with Fabric.js 1.6.7</desc><defs></defs><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
我一直在努力做的事情:
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve" preserveAspectRatio="xMidYMid meet"><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="100%" height="100%" preserveAspectRatio="none"></image></g> <g id="1554312687241" transform="translate(781 762.29)"> <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan> </text> </g> <g id="1554312687289" transform="translate(779 847.3)"> <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan> </text> </g> <g id="1554312687296" transform="translate(776 811.17)"> <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"> <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan> </text> </g></svg>
我期待这个结果:
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
</svg>
但是,如果我只是改变期望svg的图像网址,结果是不同的我期望我不明白为什么。
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
<image xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" width="100%" height="100%"></image>
</svg>
最终目标是在png中下载svg。转换为png的代码已经完成,但是由于这个svg问题,最终的图像并不好。
您需要调整viewBox
属性。你现在拥有的那个太大了。您的重要内容占据该区域中间的一小部分。
您当前的viewBox
是:
viewBox="0 0 1512 1063"
与背景图像的非透明部分匹配的更好的viewBox
是:
viewBox="472 16 616 960"
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" xml:space="preserve">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
但是在这个例子中它仍然不完全适合。这是因为您的SVG尺寸(219 x 302)与图像/视图框(616x960)具有不同的纵横比。
你可以通过各种方式解决这个问题:
preserveAspectRatio="none"
添加到SVG来拉伸viewBox区域以适应更宽的SVG尺寸。body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="none">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
background-size: cover
添加到SVG,您可以安排viewBox区域被放大以适应更宽的SVG维度(相当于HTML的preserveAspectRatio="xMidYMid slice"
)。body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="xMidYMid slice">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
width
属性来缩小SVG。更正确的值是:
302 * (616/960) ~= 194
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="194" height="302" viewBox="472 16 616 960">
<desc>Created with Fabric.js 1.6.7</desc>
<defs></defs>
<g transform="translate(776.8 529.9) scale(1.01 0.95)">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
</g>
<g id="1554312687241" transform="translate(781 762.29)">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
</text>
</g>
<g id="1554312687289" transform="translate(779 847.3)">
<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
</text>
</g>
<g id="1554312687296" transform="translate(776 811.17)">
<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
</text>
</g>
</svg>
您遇到的问题是图像具有宽透明边框。您需要使用类似Photoshop的软件来切断边框,或者您可以这样做:
body {
padding: 10vw 30vw;
}
svg {
border: 5px solid;
}
<svg viewBox="-304 -506 608 1005" >
<g id="theg">
<image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-733" y="-750" width="1461" height="1564"></image>
</g>
<g id="theText" text-anchor="middle" fill="#ffffff">
<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" >Votre entreprise</text>
<text font-family="ABeeZee" y="30" font-size="20" >Votre adresse</text>
<text font-family="ABeeZee" font-size="18" y="60" >Votre telephone</text>
</g>
</svg>