代码之家 › 专栏 › 技术社区 › manymanymore

垂直对齐SVG内的图像

svg image css html

manymanymore · 技术社区 · 6 年前

我如何在一个 svg ?

我看见 this 但没有帮助。从中可以看出 the jsfiddle 尝试 dominant-baseline: central; 不工作或者我做错了什么。

如有任何帮助,将不胜感激。

代码:

<svg style="background-color:#f1fe96; border: 1px black solid;">
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width ="50" height = "50" style="dominant-baseline: central;"/>
  
</svg>

1 回复 | 直到 6 年前

ccprog 6 年前

将图像的高度设置为100%(或要使图像居中的任何高度),并另外设置属性 preserveAspectRatio="xMidYMid meet" .

<svg style="background-color:#f1fe96; border: 1px black solid;">
  
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width="50" height="100%" preserveAspectRatio="xMidYMid meet"/>
  
</svg>

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前