时间戳

首页 > 解决方案 > 根据内部的 png/jpeg 图像调整 SVG 元素的大小

svg - 根据内部的 png/jpeg 图像调整 SVG 元素的大小

问题描述

试图将我的头包裹在 SVG 上并显示图像。几个小时前我问了一个相关的问题，但我似乎已经设法弄清楚了那部分，现在我一直试图弄清楚视口、视图框和其中的图像标签之间的关系。

我对 viewbox 的第一个理解是它基本上是在定义坐标系。将其设置为“0 0 100 100”意味着“左上角称为 0,0，而 100,100 是右下角坐标”，那么如果您绘制类似矩形的东西，则使用 0-100 到达角落。然后你在它周围使用 css 在容器上设置你想要的大小，并且 SVG 标签内的所有内容都会相应地缩放。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" style="height: 100vh;">
    <div class="col-2" style="background: pink">
      1 of 3
    </div>
    <div class="col-8 bg-dark">
      <p>
        A bit of text
      </p>

      <svg viewBox="0 0 100 100" style="outline: 1px solid red" preserveAspectRatio="xMidYMid meet">
        <defs>
          <mask id="image-mask" x="0" y="0" width="100" height="100">
            <rect x="0" y="0" width="100" height="100" fill="#F000FF" />
            <rect x="33" y="0" width="33" height="100" fill="white" />
          </mask>
        </defs>
       <image width="100" height="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg/640px-Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg" mask="url(#image-mask)" /> 
      </svg>
      <p>
        Some more text
      </p>
    </div>
    <div class="col-2" style="background: orange">
      3 of 3
    </div>
  </div>
</div>

这似乎是非常错误的。

在调整、测试和探索我目前的理解是“如果我想在 SVG 中显示非矢量图像，我是否必须设置视口和图像高度/宽度以匹配图像的纵横比，数字不要只要比例正确就没有关系”。所以我这里的图像是 640x170px。归一化为宽度 100，高度为 26.56。所以我将视口设置为 0 0 100 26.56，图像宽度/高度分别设置为 100 和 26.56：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" style="height: 100vh;">
    <div class="col-2" style="background: pink">
      1 of 3
    </div>
    <div class="col-8 bg-dark">
      <p>
        A bit of text
      </p>

      <svg viewBox="0 0 100 26.56" style="outline: 1px solid red" preserveAspectRatio="xMidYMid meet">
        <defs>
          <mask id="image-mask" x="0" y="0" width="100" height="100">
            <rect x="0" y="0" width="100" height="100" fill="#F000FF" />
            <rect x="33" y="0" width="33" height="100" fill="white" />
          </mask>
        </defs>
       <image width="100" height="26.56" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg/640px-Panorama_Gendarmenmarkt-Berlin-Huntke-2008.jpg" mask="url(#image-mask)" /> 
      </svg>
      <p>
        Some more text
      </p>
    </div>
    <div class="col-2" style="background: orange">
      3 of 3
    </div>
  </div>
</div>

这似乎有效，当我调整数字以适应其 100x66.56 的纵横比时，它也适用于注释掉的图像。当涉及到 viewBox 和图像时，我并没有真正找到太多信息，所以我担心的是我很幸运并且猜到了适用于两个示例的东西。

所以我正在寻找的答案是：

标签： svg

解决方案

推荐阅读