圣诞树动画

Question

Денис Небесный

Asked:2020-04-30 22:30:01 +0000 UTC2020-04-30 22:30:01 +0000 UTC 2020-04-30 22:30:01 +0000 UTC

SVG。设置上边距

772

如何设置上边距（类似于 CSS - margin-top），使图像从顶部移动到中心？

<?xml version="1.0" encoding="windows-1252"?>
    <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <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 290 290" xml:space="preserve" style="enable-background:new 0 0 290 290;">
    <g xmlns="http://www.w3.org/2000/svg">
	<rect y="220" width="70" height="70" fill="#00aeef"/>
	<rect y="110" width="70" height="70" fill="#00aeef"/>
	<rect width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" width="70" height="70" fill="#00aeef"/>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <g>
    </g>
    <script xmlns="" type="text/javascript" id="useragent-switcher">navigator.__defineGetter__("userAgent", function() {return "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.9 Safari/537.36"})</script></svg>

1 个回答

Voted

Alexandr_TT · Answer 1 · 2020-05-01T00:00:33Z

中的类比margin-top 是svg改变属性y-min viewBox="x-min y-min 290 290"。
通过增加 y-min正值，我们可以提高图像，而减小它可以降低图像。在您的 svg 示例中，图像占据了整个画布，因此您不能立即将图像从顶部移动到底部，因为图像将从底部被切断。

下面是您的代码示例，我从中删除了它留下的不必要的行Adobe Illustrator并将 svg 代码包装在其中div以更改其宽度和高度为百分比以更改整个 svg 图像的大小。这样做是为了使图像响应。添加了红色边框以显示 svg 图像的边框。现在图片占据了整个 svg 画布。

container {
   width:100%;
   height:100%;
  }

<div class="container">   
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 0 290 290" style="border:1px solid red;" >
    <g xmlns="http://www.w3.org/2000/svg">
	<rect y="220" width="70" height="70" fill="#00aeef"/>
	<rect y="110" width="70" height="70" fill="#00aeef"/>
	<rect width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" width="70" height="70" fill="#00aeef"/>
    </g>
     </svg> 
	 </div>

现在我们放大viewBox两次，将图像缩小一半svg ——viewBox="0 0 290 290"它变成了—— viewBox="0 0 580 580”

.container {
   width:100%;
   height:100%;
  }

 <div class="container">   
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 0 580 580" style="border:1px solid red;" >
    <g xmlns="http://www.w3.org/2000/svg">
	<rect y="220" width="70" height="70" fill="#00aeef"/>
	<rect y="110" width="70" height="70" fill="#00aeef"/>
	<rect width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" width="70" height="70" fill="#00aeef"/>
    </g>
     </svg> 
	 </div>

现在我们将整个形状块向下移动，为此我们更改参数 y-min=(-145) y viewBox="0 -145 580 580"

.container {
   width:100%;
   height:100%;
  }

 <div class="container">   
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 -145 580 580" style="border:1px solid red;" >
    <g xmlns="http://www.w3.org/2000/svg">
	<rect y="220" width="70" height="70" fill="#00aeef"/>
	<rect y="110" width="70" height="70" fill="#00aeef"/>
	<rect width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" width="70" height="70" fill="#00aeef"/>
    </g>
     </svg> 
	 </div>

可以通过更改容器百分比来调整 svg 图像的大小，同时保持图像响应。

.container {
   width:10%;
   height:10%;
  }

 <div class="container">   
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 viewBox="0 -145 580 580" >
    <g xmlns="http://www.w3.org/2000/svg">
	<rect y="220" width="70" height="70" fill="#00aeef"/>
	<rect y="110" width="70" height="70" fill="#00aeef"/>
	<rect width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="110" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="220" width="70" height="70" fill="#00aeef"/>
	<rect x="220" y="110" width="70" height="70" fill="#00aeef"/>
	<rect x="220" width="70" height="70" fill="#00aeef"/>
    </g>
     </svg> 
	 </div>

SVG。设置上边距

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

SVG。设置上边距

1 个回答

相关问题