可能构建一个具有流体水平缩放的svg，类似于旧的表切片方法？ [英] Possible to build an svg that has fluid horizontal scaling, similar to old table-slice method?

问题描述

我试图构建一个可以水平和流畅扩展的svg，类似于用于在页面顶部流畅缩放标题的旧表格切片图像。通常，这需要端部组件不伸展，而中心组件不伸展（或重复）。我已经包括一个示例图像下面。我已经尝试嵌套的svg标签结合viewBox和preserveAspectRatio在各种配置，但不能完全让它工作。

I am attempting to build an svg that can be scaled horizontally and fluidly, similar to the old table-sliced images used to scale a header fluidly across the top of a page. Typically this requires the end component(s) not to stretch while the center component does stretch (or repeat). I have included an example image below. I have experimented with nested svg tags combined with viewBox and preserveAspectRatio in a variety of configurations but can't quite get it to work.

这是一个我需要做的工作示例， pure html / css： http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview

Here is a working example of what I need to do, in pure html/css: http://plnkr.co/edit/cSHBV27fL6k2m67FgwlA?p=preview

是否可以用一个自包含的svg来做到这一点，还是浪费我的时间？

Is it even possible to do this with a single self-contained svg, or am I wasting my time?

推荐答案

通过使用foreignObject，实际上可能没有Javascript。但它不会工作在Internet Explorer中，bcs。 IE不支持foreignObject。请参阅我的文章： http：//w3.eleqtriq。 com / 2014/03 / the-holy-grail-of-image-scaling /

It's actually possible without Javascript by using foreignObject. But it will not work in Internet Explorer, bcs. IE doesn't support foreignObject. See my article at http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/

这篇关于可能构建一个具有流体水平缩放的svg，类似于旧的表切片方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！