javascript - 防止 SVG 模式的拉伸(stretch)/preserveAspectRatio

标签 javascript html css vector svg

我有一个要应用模式的 svg 路径。但是,该图案似乎在水平拉伸(stretch),我认为我可能应用不正确。有没有办法确保 svg 填充图案保持其比例,就好像它是背景一样?我的代码在下面,下面的 jsFiddle 类似,但设置略有不同。我要应用的图案是 500px x 500px。

<svg version="1.1"
 baseProfile="full"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:ev="http://www.w3.org/2001/xml-events" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<title>Text Pattern Fill Example</title>
<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="500" height="500">
        <image xlink:href="img/textures/blogCont/white_wall_hash/white_wall_hash.png" x="0" y="0"
            width="500" height="500" />
    </pattern>
</defs>
<path d="M0 0 C 50 100 80 100 100 0 Z" fill="url(#img1)" />        

这里是 a jsfiddle 的链接

我正在尝试合并 this pattern曲线效果下降约 1/3 this svg page.

谢谢!

最佳答案

它正在拉伸(stretch),因为您将整个 SVG 拉伸(stretch)到宽度(但不改变高度)。现在真的没有办法与之抗争。如果 SVG 未以 1:1 呈现,则所有内容都将以某种方式拉伸(stretch)。

您唯一的选择是将 SVG 在 x 和 y 方向缩放相同的量。

http://jsfiddle.net/RKLec/1/

或者,使用变通方法,例如在 HTML 中将两个元素分层。例如。将图像作为背景 <div>并将 SVG 放在另一层并重叠它们,以便 SVG“掩盖”图案。

关于javascript - 防止 SVG 模式的拉伸(stretch)/preserveAspectRatio,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21718656/

相关文章:

javascript - 旧代码中的 Typescript 3.5.1 "incompatible types"错误?

Javascript 选择值加载

javascript - chart.js 中条形图中的交替条未标记

html - 更改下载的模板导航颜色困惑

javascript - 使用 jQuery 获取父索引

javascript - Javascript 中重定向的正确方法

iphone - CSS 标准浏览器与 iPhone 或移动设备 : two box models? 技巧示例

javascript - 响应式可折叠表格一次一个 :

javascript - 如何保存所有数据

CSS/IE7 - div 中的文本未居中,div 后有额外的分隔符