程序员经验分享-hwhale

有没有办法在 SVG 中应用 9-patch/scale-9 原则？

2024-03-12

我想知道是否有一种方法可以制作一个 svg 图形，该图形可以按照与9-patch http://developer.android.com/tools/help/draw9patch.html在 Android 上（或者像 flash 中的scale 9）。

基本上，svg 内的部分内容应根据视口的正常扩展规则进行缩放，但某些元素将保持不缩放并按照 svg 文件中的定义进行锚定。

（这个想法是使用 SVG 为某些按钮制作一些复杂的背景，但允许它们根据按钮的内部内容进行相应缩放）

我认为使用普通的 svg 声明是不可能的，但也许可以使用一些嵌入式脚本，尽管我找不到任何这样做的示例或库。

**编辑：**我知道今年老问题 https://stackoverflow.com/questions/9547993/svg-nine-slice-scaling但我希望有人可以有一个替代的、更可重用的选项/库


我在我的博客上写过它，当你愿意牺牲 IE 时，它可以以“完美”的方式进行，并且只要你可以接受不那么完美的解决方案，就可以在 IE 中使用“几乎”的方式：http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/

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

javascript

html

SVG

有没有办法在 SVG 中应用 9-patch/scale-9 原则？ 的相关文章

  • 如何使用画布调整图像大小然后裁剪图像

    我已经知道如何 gt 调整图像大小 var image document getElementById myImage canvas document createElement canvas ctx canvas getContext 2

  • 为什么 Visual Studio 格式文档工具将标题标签放在两行上？

    所以如果我有一个像这样的 HTML 标题 h2 A Heading h2 我跑Edit gt Format Document它最终看起来像这样 h2 A Heading h2 为什么是这样 它不会对其他块元素执行此操作 但会对其他内联元素执

  • 如何消除页面边缘的间隙？

    我已经将主体和两个 div 的边框 内边距和边距设置为 0px 但我似乎仍然无法摆脱差距 body padding 0px border 0px margin 0px width 100 height 100vh mainPage heig

  • 有没有办法强制浏览器刷新/下载图像？

    我遇到一个问题 用户报告他们的图像没有上传 而旧图像仍然存在 仔细检查后 新图像就在那里 它们只是与旧图像具有相同的名称 我在上传时所做的是出于搜索引擎优化的目的重命名图像 当他们删除图像时 旧索引变得可用并被重用 因此它具有相同的图像名称

  • 根据路由动态加载 Node.js 模块

    我正在使用 Express 在 Node js 中做一个项目 这是我的目录结构 root start js server js lib api user getDetails js user register js The lib api

  • 如何通过 Web-Workers 传递自定义类实例？

    由于 Web Worker JSON 在线程之间序列化数据 因此这样的方法不起作用 worker js function Animal Animal prototype foobar function self onmessage func

  • Svg 点击事件无法正常工作

    我试图让我的 SVG 看起来像一个 饼形 看起来一切都很好 此外 我希望它们每个都有不同的点击事件 function one alert 1 function two alert 2 function three alert 3 funct

  • 使用标签强制关闭 IE 兼容模式

    我正在为一个在所有 Intranet 站点上强制使用兼容模式的客户工作 我想知道是否可以在 HTML 中放入一个标签来强制关闭兼容模式 有 边缘 模式 http msdn microsoft com en en library cc8175

  • Google Chrome 不想使用 mediaelement.js 播放 mp4

    我在我的网站上使用最新的 mediaelement js 来播放 html5 视频 Google Chrome 中有一些奇怪的东西 他播放一个视频 但不想以 mp4 格式播放另一个视频 并且不会回退到 webm 两个视频均使用 ffmpeg

  • 函数声明可以出现在 JavaScript 的语句内部吗？

    请考虑将官方 ECMAScript 规范作为您答案的来源 而不是特定浏览器供应商发布的文档 我知道 Mozilla 用 函数语句 扩展了它的 JavaScript 实现 因此 根据 ECMAScript 规范 因此 其中定义的语法产生式 这

  • 如何在 AngularJS 中设置选择选项中的文本格式？

    我有以下 json 对象 scope values id 2 code Code 1 name Sample 1 id 4 code Code 2 name Sample 2 id 7 code Code 3 name Sample 3 在

  • ajaxStart() 仅调用一次，但 ajaxComplete() 调用多次

    我想对页面上的每个 AJAX 请求进行调用 I read here http docs jquery com Ajax Events that ajaxStart 全局事件 如果启动 Ajax 请求并且当前没有其他 Ajax 请求正在运行

  • 以编程方式访问使用数据 URI 作为源的 iframe

    我正在使用 数据 URI 以编程方式创建一个 iframe 该框架加载良好 但似乎以编程方式使用 iframe 会遇到跨域安全检查 var iframeDoc document getElementById myFrame contentW

  • 缩放父元素但删除子元素的缩放

    我目前正在使用一些CSS动画scale 有没有办法限制子元素不缩放而只有父元素会缩放 scale max width 200px height 200px background color beige webkit transition t

  • jquery ui 自动完成添加跨度

    我在 div 上使用 jQuery 自动完成 但我得到了 jquery 自动添加的额外范围 span class ui helper hidden accessible search test span 如何防止创建此跨度 我通过添加 CS

  • codemirror - 在编辑器内检测并创建链接

    我正在使用 codemirror 配置为显示 javascript 我有这样的代码 var ref http www example com test html var ref2 http www example com test2 htm

  • 桌子高度如何固定？

    我想将表格高度固定为 600px 即使内容很长 尝试将表格包裹在一个div标签 并设置 CSS 属性div像这样 div tablewrapper height 600px overflow y auto 如果表格的高度超过 600 像素

  • 使用与 eval 相反的括号表示法

    我有以下内容 var module function console log module ran var someString module string TypeError object is not a function eval s

  • 未终止的字符串文字

    我有一个 php 脚本 可以在我的服务器上上传 mp3 文件 我使用 上传 有一个事件 onSelect 文档 http www uploadify com documentation events onselect 当文件上传时调用 使用

  • 访问 django for 循环中的元素

    我有一个 Django 模板 其中包含以下代码 该模板创建多个按钮并尝试通过单击 在同一按钮上 删除 隐藏其中一个按钮 for h in helicopters div class btn group div

随机推荐

热门标签