gpt4 book ai didi

html - 如何在 HTML/CSS 中裁剪 SVG 文件

转载 作者:技术小花猫 更新时间:2023-10-29 12:09:23 25 4
gpt4 key购买 nike

我有以下 HTML 文件 (mypage.html)。 SVG 文件作为图像附加到其中。

<!doctype html>
<html>


<body>

<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>


</body>
</html>

它生成的页面如下所示:

enter image description here

请注意圆圈周围有一大片空白。我如何在 html 或 CSS 中裁剪它?

最佳答案

裁剪

您可以通过使用负边距并固定父元素的大小来裁剪图像:

CSS Display an Image Resized and Cropped

但这是一个 SVG!

不仅可以在html中直接显示一个svg:

<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>

但要裁剪/调整大小,您只需更改 标签上的 viewBox 属性即可:

viewBox="0 0 100 100" 

将显示 0 到 100 单位 x 和 y 范围内的任何内容

viewBox="-100 -100 100 100" 

将显示从 -100 到 100 单位的 x 和 y 的任何值

viewBox="50 50 500 500" 

将显示 50 到 500 单位 x 和 y 的任何内容

关于html - 如何在 HTML/CSS 中裁剪 SVG 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37588405/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com