为什么 HTML 锚标记不包裹可缩放的 SVG
2024-04-29

我创建了一个可扩展的 SVG 对象,使用preserveAspectRatio and viewBoxSVG 文件本身的属性:

<svg
  …
  width="800"
  height="800"
  preserveAspectRatio="xMinYMin meet"
  viewBox="0 0 800 800"
  …

在 HTML 中,我使用以下命令引用 SVG 文件<object>标记并包裹它<a>标签(我想这样做,以便稍后可以设计它的样式):

<a>
  <object type="image/svg+xml" data="smiley.svg">
  </object>
</a>

我的风格是<object>使用一些 CSS 标记使其宽度为 50%,但宽度不超过 100%:

object {
  max-width: 100%;
  width: 50%;
}

问题是锚标记没有包裹整个对象!

有人有什么想法吗?


Adding display: block锚定似乎为我解决了这个问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么 HTML 锚标记不包裹可缩放的 SVG ? 的相关文章
  • 如何在课外使用$this?

    我们可以使用 this课外 请看下面的例子
  • Python 对象属性 - 访问方法

    假设我有一个具有某些属性的类 在 Pythonic OOP 中 如何访问这些属性是最好的 就像obj attr 或者也许编写 get 访问器 此类事物可接受的命名风格是什么 Edit 您能否详细说明使用单下划线或双前导下划线命名属性的最佳实
  • JavaScript 中的对象解构[重复]

    这个问题在这里已经有答案了 gt a a true Statement lt a true 上面的语句是赋值true to a 为什么上面的语句在chrome控制台中没有报错 虽然下面的语句给出了错误 gt a a true Stateme
  • 从左到右显示 SVG 动画

    我有两个 SVG 图像 我想将它们设置为动画 如下所示 首先显示Full Screen文本从左到右 然后用第二个 SVG 覆盖该单词Screen显示整个第二个 SVG 因此 最后我将得到第二个 svg 中的单词 Full 黑色空间 以及单词
  • Angular svg不同实例共享相同的defs

    我有一个角度组件 我在其中使用 def 更改电池 svg 状态填充
  • 在视图内调整 SVG 图像的大小

    我有一个 FloatingActionButton 其 SVG 图像绑定到它的 src 属性 但它没有显示我需要的尺寸 如何调整它的大小以显示更大的图像 这是我的画
  • Java:如何复制对象数组?

    现在 我有一个 Point 对象数组 我想制作一个COPY该数组的 我尝试过以下方法 1 Point temp mypointarray 2 Point temp Point mypointarray clone 3 Point temp
  • Java中的String为什么是不可变的对象,但我在创建一个对象后仍然可以更改它的值? [复制]

    这个问题在这里已经有答案了 如果我可以创建一个字符串并给它一个值 这怎么可能呢 然后 我可以像这样简单地覆盖它的值 String a abc a def 我怎么可能改变的值a 我一定在这里遗漏了一些东西 我知道每当创建 String 对象时
  • 使用 d3 进行多级/分组轴标签

    我想知道是否有一种简单的方法可以在 d3 中添加多级 分层 分组轴标签 例如 如果我有一个折线图 其中 x 轴的月份名称跨越多年 那么我还希望将年份作为月份名称下方的标签 因此它看起来像这样 Oct Nov Dec Jan Feb Mar
  • 在 D3 中在外部加载的 svg 图形上绘图

    我已经从 svg 文件加载了外部图形 我想尝试在其上绘图 但不知道如何操作 我的简单 d3 代码在这里
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • 镀铬中的 SVG 条带

    I am using a svg file to produce a smooth gradient when I noticed some serious banding issues in Google Chrome 20 Even s
  • 从平面数组创建嵌套对象

    我目前有一个对象数组 我正在尝试将其重塑为嵌套对象ID作为对象键 并将其作为目标ID与parentid 如果不是 0 我尝试了几种方法 但我很挣扎 主要绊脚石for me是超过一两层深度的任何东西 理想情况下 我需要它是动态的 这样它就可以
  • IE11 元元素破坏 SVG

    我已将 SVG 文件数据直接嵌入到我的 html 中 它在 Chrome 和 Firefox 中显示 但在 IE11 中根本不显示 SVG 的 Pastebin 链接是http pastebin com eZpLXFfD http past
  • SVG 捕获鼠标坐标

    我知道之前已经有人问过有关 svg 鼠标坐标的问题 但我对我当前遇到的行为感到非常困惑 而且似乎没有一个线程能够解决它 我用于捕获坐标的方法 var pt svg createSVGPoint Created once for docume
  • 如何在Java中计算对象的数字年龄[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道Java中对象的年龄 当我们使用new关键字时 Java中用户定义的对象被创建 但是什么时候它会被销毁 是跨越JVM的perm
  • SVG 图标像素对齐?

    在此图像中 左侧 黑色 垃圾桶是图标字体 它的字体大小是 16px 这使得图标在 100 的时间里看起来都很清晰 两个蓝色垃圾桶是 SVG 它们具有完全相同的标记 其中之一happened一个是像素对齐的 另一个不是 我怎样才能强制我的 S
  • 在这种情况下 b 是标量对象吗?

    include
  • 字符串化 JavaScript 对象

    我正在寻找字符串化一个对象 我想要这样的输出 1 valeur dalebrun usager experttasp date 2013 08 20 16 41 50 2 valeur test usager experttasp date
  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西

随机推荐