相关疑难解决方法(0)

将背景图像设置为动态 svg 数据?

最初我有一些内联 svg,可以按我的意愿工作。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
    </pattern>
    <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#smallGrid)"/>
      <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="1"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)" />
</svg>
Run Code Online (Sandbox Code Playgroud)

很好,因为它是内联的,我可以在它上面做 jQuery 选择器来取消日期:宽度/高度和 path.d 属性。

这样,它是一个重叠的 div,它没有做我想要的。

下一步我想将它保存为一个 svg 文件,然后引用它:

<div style="background-image:url('images/grid.svg');"></div>
Run Code Online (Sandbox Code Playgroud)

这对我来说是完美的,因为我把已经存在的东西给了它一个背景,而不是一个全新的带有数据的 div。

尽管背景图像路由的问题是我无法动态调整高度/宽度/ path.d 属性

有没有办法让我两全其美?

background-image + being able to query and update …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery svg

7
推荐指数
2
解决办法
7590
查看次数

标签 统计

css ×1

javascript ×1

jquery ×1

svg ×1