我有下面的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>它生成的页面如下所示：
注意圆圈周围有一个很大的白色。我如何在html或CSS中裁剪它呢？
7条答案
按热度按时间iyfamqjs1#
裁剪
您可以使用负数边界并固定父元素的大小来裁剪影像：
CSS Display an Image Resized and Cropped
但这是SVG！
您不仅可以直接在html中显示SVG：
但是要进行裁剪/调整大小，只需更改标记上的viewBox属性：
将显示0到100单位x和y内任何内容
将显示-100到100单位x和y之间的任何值
将显示50到500单位x和y之间的任何值
w51jfk4q2#
这些答案（和多个类似/重复）似乎都没有完全回答这一点，并提供了一个例子。
逐步说明：直接在SVG代码中删除“填充”（周围白色）
困惑？简单的分步示例
这个例子将使它变得非常简单，并将直接使用下面的svg作为参考。如果你想完成这个例子，只需将下面的所有代码 Package 在HTML标签
<html> svg code </html>中，并在浏览器中打开。txu3uszq3#
你可以用片段标识符来做你想做的事情。片段标识符允许你定义你想在img标签中显示的SVG片段，并允许控制图像转换和长宽比。
在svgurl的末尾加上
#svgView(viewBox(0, 0, 32, 32))定义了svg中要显示的区域。前两个参数是viewbox左上角的x和y坐标，后两个参数是viewbox的宽度和高度。使用此技术，您的img标签看起来会像这样：
确保视图框的纵横比与img标签的纵横比匹配是很重要的，否则您的视图框将无法正确调整大小/对齐。如果您需要进一步控制纵横比，您可以始终使用preserveAspectRatioSpec片段标识符。
为了找到整个图像的viewBox，请直接访问svg url并检查页面元素，以找到最外层svg元素上定义的viewBox。
有了这些信息，您现在可以根据需要定制视图框。
CodePen Example Here
zpgglvta4#
只需使用Inkscape。
首先，我建议阅读大卫Rebd的文章，了解如何通过文本编辑器（如Notepad++）调整SVG图像的尺寸。
然后在Inkscape中，只需单击该项目，您就可以从字面上只设置尺寸，甚至不必担心精确的鼠标拖动。
如果缺少工具栏，请单击“视图”菜单，然后单击“显示/隐藏”并启用“工具控制栏”。
r1wp621o5#
只需在https://svgcrop.com上单击一下即可完成此操作
n3h0vuf26#
在inkscape中裁剪任何格式，基于https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#
1.使用箭头工具选择图像/对象（全部），左键单击;
1.转到菜单“对象”，“解组”（这一步是不需要的照片）
1.“选择矩形工具（或您要使用的任何形状工具）在您要裁剪的图像上绘制形状。”
1.使用箭头工具，选择所有对象，因为它们可能被取消分组，在所有区域上拖动左键单击（否则，使用shift +左键单击）
1.在新形状上（裁剪区域步骤2）右键单击并选择“设置裁剪”
1.在“编辑”菜单中，使用“调整页面大小以适应所选内容”
sqyvllje7#
在尝试用代码修复之前，您可能需要尝试优化SVG布局。检查器中可见的白色暗示SVG没有紧密地设置到画板上。如果您有Adobe Illustrator可用，请在其中打开SVG。您应该会看到类似于以下内容的内容：
白色区域是画板，圆形区域是SVG。您要做的是确保SVG与画板大小相同。此按钮允许您调整画板的大小：
选择那个，选择你的白色正方形，把边缘接触你的圆，并保存你的SVG。
另一个可能的解决方案是，SVG文件中有一个剪切蒙版，它会扩展SVG图形的大小。在这种情况下，您需要尽可能地删除这些蒙版。要判断是否有剪切蒙版影响您的SVG，请单击您的圆圈。如果选中时周围的框没有接触到圆圈的边缘，则说明有一个剪切蒙版将图像边界向外推。
看看你的图像，这可能是相当复杂的，如果你不太熟悉矢量编辑，它可能会更快，更容易把它传递回设计师。