嵌入带有参数的 svg 对象

2023-12-22

谁有想法或提示

我想在 die svg 标签中嵌入一个 svg 对象并更改此参数

HTML/SVG(未进行)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Test</title>   
</head>
<body>
<svg width="2000" height="2000">
       <object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
          <param name="color" value="yellow" />
       </object>
</svg>
</body>
</html>

SVG 文件 lamp.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
  <circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>

对于 IMAGE TAG,不可能进行标签参数传递。

<image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"><param name="color" value="yellow" /></image>

目前浏览器不支持以这种方式传递参数,尽管有一个SVG 参数规格 http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/由 W3C 开发。规范中的示例使用a script http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/param.js模拟对该功能的支持。

注:垫片param.js 进入 SVG 文件 http://www.mixed-up.com/markb/Web/CustomSVG/proscons.html,不是 html 文件:

e.g.,

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68">
<rect x="10" y="10" height="48" width="48" stroke="black" stroke-width="1" fill="param(color) red">
</rect>
<rect x="29" y="0" height="10" width="10" fill="black"></rect>
<text x="24" y="46" fill="param(text) black" style="font-size:32px;"
  content-value="param(number) 1">1</text>

<script type="text/ecmascript" xlink:href="param.js" /> 

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

嵌入带有参数的 svg 对象 的相关文章

  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • JavaScript:预期的赋值或函数调用,却看到了一个表达式

    我正在使用 JSHint 来确保我的 JavaScript 是 严格的 但我收到以下错误 预期是赋值或函数调用 但看到的是表达式 关于以下代码 var str A B C D var data var strArr str split fo
  • 随机定位的 div,不重叠

    所有 div 都像我需要的那样 随机 放置 但它们偶尔会重叠 这只是一个机会问题 我怎样才能防止这种情况发生 理想情况下我能够设置它们之间的最小距离 我可以通过进一步开发当前的 javascript 来实现这一目标吗 我需要考虑完全不同的方
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之
  • 使用纯javascript选择最接近id的id

    div div TEXT div div div div TEXT div div div TEXT div 如何选择最接近div1的div2 关注w3docs https www w3 org TR html4 struct global
  • 如何使用带有 python 的报告实验室将 html 文档转换为 pdf

    我正在尝试使用报告实验室将我创建的 html 文档转换为 pdf html 文档如下 我不确定如何做到这一点 我在网上查看过 似乎找不到解决方案 html文档 h2 Convert to pdf h2 p Lorem ipsum dolor
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • 使用 实现可访问性的更好做法是什么?

    我有一个下载链接 但我找不到任何良好的可访问解决方案来说明如何处理这种情况 我遵循一个共同的经验法则 按钮做事 链接去地方 我的情况是 我有一个触发文档下载的按钮 同一页面 我相信这应该是一个具有按钮角色的锚点 因为它明确不触发重定向或导航
  • Java中有没有一种方法可以通过名称实例化一个类?

    我正在寻找问题 从字符串名称实例化一个类 https stackoverflow com questions 9854900 instantiate an class from its string name它描述了如何在有名称的情况下实例
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • 如何在jquery中以相反的顺序迭代元素? [复制]

    这个问题在这里已经有答案了 我是jquery的新手 我想知道如何使用each 在jquery中以相反的顺序迭代表单元素 任何帮助 将不胜感激 尝试这个 input get reverse each function
  • 无效字符错误:“fred”

    我确信他一定是一个新手问题 简单来说 我想定义我的第一个 Polymer dart 组件 只是我一直在同一个减速带上踢脚趾 为了使事情变得非常简单 我将其简化为一个非常简单的示例 我做了一个简单的rename示例 跑表 来自 Dart 组件

随机推荐