svg 响应鼠标时间_使SVG响应

最新推荐文章于 2021-10-12 18:59:37 发布

cungui5726

最新推荐文章于 2021-10-12 18:59:37 发布

阅读量191

点赞数

文章标签： css java python html js ViewUI

原文链接：https://thenewcode.com/744/Make-SVG-Responsive

版权

svg 响应鼠标时间

For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport by default.

对于具有无限可伸缩性的图像格式， SVG可能是难以响应的令人惊讶的格式：默认情况下，矢量图像不会将自身调整为视口的大小。

制作响应式SVG图像 (Make A Responsive SVG Image)

As an image, you can make a SVG vector illustration scale with the page content as you would any other:

作为图像 ，您可以像使用其他任何内容一样使用页面内容制作SVG矢量图比例尺：

<img src="monkey.svg" alt="Monkey face" style="width: 100%; height: auto;">

While this works in many cases, sometimes it isn’t enough, especially if you’re trying to embed the SVG illustration by entering the code directly into the page. In that case, simply modifying the width and height of the element won’t work.

尽管这在许多情况下可行，但有时还远远不够，尤其是当您尝试通过直接在页面中输入代码来嵌入SVG插图时。在这种情况下，仅修改元素的width和height是行不通的。

使内联SVG响应 (Making Inline SVG Responsive)

After being pasted into the <body> of an HTML document, embedded SVG code will typically look something like this:

粘贴到HTML文档的<body>中之后，嵌入式SVG代码通常将如下所示：

<body>
	<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" 
width="500px" height="500px" viewBox="0 0 500 500" 
enable-background="new 0 0 500 500" xml:space="preserve">
		<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	cx="250" cy="250" r="200" opacity="0.6" />
	</svg>
</body>

With the <svg> root element cleaned up, the code is much more presentable:

清理了<svg>根元素后，代码更加具有代表性：

<svg version="1.1" viewBox="0 0 500 500">
	<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	cx="250" cy="250" r="200" opacity="0.6" />
</svg>

Removing most of the redundant <svg> element attributes makes the illustration responsive, but at the cost of adding space above and below the vector image in some browsers (IE in particular). You might assume that the remaining viewBox attribute is the culprit, but it’s not: leave that alone. We have to take three more steps to integrate the responsive SVG element with our page content to make it work in all browsers.

删除大多数多余的<svg>元素属性会使插图具有响应性，但是以在某些浏览器(尤其是IE)中在矢量图像上方和下方添加空间为代价。您可能会认为剩下的viewBox属性是罪魁祸首，但事实并非如此：不去管它。我们还必须采取三个步骤，将响应式SVG元素与页面内容集成在一起，以使其在所有浏览器中都能正常工作。

First, surround the SVG code with a <div> and add a preserveAspectRatio attribute and class to the <svg> root element:

首先，用<div>包围SVG代码，并向<svg>根元素添加一个preserveAspectRatio属性和类：

<div class="svg-container">
	<svg version="1.1" viewBox="0 0 500 500" 
preserveAspectRatio="xMinYMin meet" class="svg-content">
	<circle fill="#F7941E" stroke="#231F20" stroke-width="10" 
	stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" />
	</svg>
</div>

That moves the SVG illustration to the top of its display container. To complete the presentation, we use a variation of the old absolutely-positioned-element-inside-a-relative-container trick, with an offset padding, rather like the approach used to make responsive video:

这会将SVG插图移动到其显示容器的顶部。为了完成演示，我们使用了绝对定位的 -element-inside-a- relative -container技巧的变体，带有偏移填充，就像用于制作响应视频的方法一样：

.svg-container { 
	display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

Note that the width used in the CSS assumes that you want the SVG image to be the full width of the page (or at least its parent container). The padding-bottom amount represents a ratio between the SVG illustration’s height and width. Dividing the height of the document’s viewBox by its width gives a 1:1 ratio in this case, meaning padding-bottom should be set to 100%. If the SVG image was wider than it was tall, say 1:2, the padding-bottom would be set to 50%.

请注意，CSS中使用的width假定您希望SVG图像为页面(或至少其父容器)的整个宽度。 padding-bottom量表示SVG图的高度和宽度之比。在这种情况下，将文档的viewBox的height除以其width可得到1：1的比率，这意味着padding-bottom应该设置为100% 。如果SVG图像的宽度大于高度，例如1：2，则padding-bottom将设置为50% 。

Finally, position the SVG inside the container with a little more CSS:

最后，用更多CSS将SVG放置在容器中：

.svg-content { 
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

This provides a solution in which the SVG illustration can scale gracefully on the page without disturbing other content; the same code will work on an <object> tag used to embed the vector drawing:

这提供了一种解决方案，其中SVG插图可以在页面上正常缩放，而不会干扰其他内容。相同的代码将对用于嵌入矢量图形的<object>标记起作用：

<div class="svg-container">
	<object type="image/svg+xml" data="samurai.svg" 
	width="100%" height="100%" class="svg-content">
	</object>
</div>

Note that all content inside the SVG will scale when it is responsive, including text.

请注意，SVG内部的所有内容在响应时都会缩放，包括文本。

svg 响应鼠标时间_使SVG响应

制作响应式SVG图像 (Make A Responsive SVG Image)

使内联SVG响应 (Making Inline SVG Responsive)

更多资源 (Further Resources)