在svg元素上设置位置

Question

我有一个SVG图片，该图片与使用SearchRoot分配给它的DirectoryEntry objADAM = new DirectoryEntry( "LDAP://my_domain.com/OU=General Distributions,DC=my_domain,DC=com", "user@my_domain.com", "password"); DirectorySearcher objSearchADAM = new DirectorySearcher(objADAM); objSearchADAM.Filter = "(|(objectClass=user)(objectClass=group))"; //only get users and groups objSearchADAM.SearchScope = SearchScope.Subtree; SearchResultCollection objSearchResults = objSearchADAM.FindAll();等效。

但是，在小于737px的电话设备上，我想将此图像移到其容器内的左侧。如果以前使用CSS background-size: cover;属性，我会做preserveAspectRatio="xMidYMid slice"或类似的事情。

使用SVG图像是否有等效的方法？

Codepen：https://codepen.io/emilychews/pen/Zqragv

在此先感谢您的帮助。

background

background-position: 85%;

Answer 1

在SVG中，您可以设置viewBox属性。这定义了SVG可见部分的x，y，宽度和高度。假设您的jpg图像的宽度为200，高度为100。在这种情况下，默认情况下，您将viewBox="0 0 200 100"设置为<svg>元素。在电话设备上，您可以将viewBox的值更改为50 0 100 100之类的值，该值只会显示图像的中间100个像素。

您可以在viewBox属性中找到更多信息：http://jonibologna.com/svg-viewbox-and-viewport/

Answer 2

在svg元素上设置位置

如果只想更改容器上的svg元素（假设元素）。您可以对任何元素应用简单的变换：

示例：

<svg viewBox="0 0 100 100" width="300px">
  <!--black rect-->
  <g>
    <rect x="0" y="0" width="20" height="20" />
  </g>
  <!--blue rect-->
  <g transform="translate(20)" fill="#08a">
    <rect x="0" y="20" width="20" height="20" />
  </g>
</svg>

相当于SVG中的背景排名百分比（％）

2 个答案:

在svg元素上设置位置