小编Eri*_*röm的帖子

我的应用程序生成一组要在SVG中绘制的图形点.点值始终在水平和垂直方向上为0-1000.绘图发生的矩形的大小可能会改变.

这是在200 X 85 rect上绘制图形的SVG元素:

<svg width="200" height="85" viewBox="0 0 1000 1000" preserveAspectRatio="none">
    <polyline  stroke="#e69800"
               stroke-width="2px"
               fill="none"
               points="0,1000 100,900 200,800
                       300,700 400,600 500,500
                       600 400 700,300 800,200900,100 1000,0"/>
</svg>

设置viewBox="0 0 1000 1000"使图形缩小到适当的大小,问题是这也会以相同的比例缩小线条的宽度,因此该线条不再可见.

SVG似乎忽略了属性中的"px" stroke-width="2px".

有没有办法用绝对像素大小指定线宽(笔画宽度)？

我们首次使用SVG作为基于移动HTML5的应用程序精灵文件(它们使视网膜处理与其他屏幕尺寸差异变得容易).

我知道生成的SVG可以直接操作(因为它们是文本文件),但是可以通过CSS或脚本来修改SVG资产(在这种情况下,通过CSS加载的背景图像)吗？

例如,我们可以加载一个全黑SVG对象,然后将其更改为白色吗？

我试图弄清楚如何获取复杂的 SVG 文件并轻松地将其调整为任何 id 之类的大小。假设我希望将 100x100 SVG 图像调整为 5x30，我希望它能够在不进行任何裁剪的情况下调整大小。

我想仅使用 SVG 文档或将其嵌入到另一个 SVG 文件中来执行此操作。我很难实现这一点。

例如：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" version="1.0">
  <image x="0" y="0" width="516.3034" xlink:href="http://upload.wikimedia.org/wikipedia/commons/e/e5/Tux_chico.svg" xlink:type="simple" xlink:actuate="onLoad" height="777.2853" preserveAspectRatio="xMidYMid meet" xlink:show="embed" />
</svg>

仅当我希望完成的是缩小嵌入图像以适合视图框时，才会裁剪图像。

我<title>在 SVG 中动态地将 a 插入到我的组中，但是它的效果不起作用。该元素被添加到适当的位置和所有内容，但我的小组没有得到工具提示。手动插入到 SVG 作品中的相同元素。为什么我的动态插入的不是？

function setuptooltip() {
    var shadowlegs = document.getElementById('shadow-legs');

    var title      = document.createElement('title');
    var titletext  = document.createTextNode("Hi there and greetings!");
    title.appendChild(titletext);

    // get the first child of shadowlegs, so we can insert before it
    var firchild = shadowlegs.firstChild;

    // insert before the first child
    shadowlegs.insertBefore(title, firchild);
}

这是代码：http : //jsfiddle.net/bYjva/

如果你看下面的html http://jsfiddle.net/aLcxj/,+和T图标放置的位置比它们应该低一些(它们放在父母之外).
HTML:

<ul class="Grid">
    <li>
        <span>Test1</span>
        <ul class="Manage">
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.334 52.334" version="1.1"  ><path d="m 19.833 0 l 12.667 0 l 0 19.834 l 19.834 0 l 0 12.667 l -19.834 0 l 0 19.832 l -12.667 0 l 0 -19.832 l -19.833 0 l 0 -12.667 l 19.833 0 Z" /></svg>
            </li>
            <li>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.812 32.617" version="1.1"><path d="m 29.7119 0 l 1.05591 0.01221 l 0.43335 0.427245 l 0.494385 3.50342 l 0.115966 …

我有一个页面使用SVG来制作图像映射.

在IE9和Chrome中运行良好,但FireFox和Opera正在裁剪图像 - 尽管翻转仍然有效.

该网站在这里:http://www.kollegetown.com

任何人都知道为什么会发生这种情况？

所以我所拥有的是一个没有HTML的SVG-Document,而且在<defs>...</defs>-section中我有我的JavaScript.在其中,有一个创建椭圆弧的功能(虽然我只将它用于圆弧,在本例中,仅用于圆)和另一个使用前一种方法创建圆的功能.这可能不是现在最优雅的方式,但我稍后会考虑一下......

然而,现在,当我尝试通过createElement()Chrome和Firefox 进入创建新元素时,SVG-DOM-Object不包含该方法的错误.

这是代码:

var SVGObj = document.getElementById('canvas');
function Point(x, y) {
  this.x = x;
  this.y = y;
}

var ids =  new Array();
ids.nextID = nextID;
function nextID() {
  this.push(this.length);
  return this.length;
}

function hypot(pointA, pointB) {
  return Math.sqrt((pointA.x - pointB.x) * (pointA.x - pointB.x) + (pointA.y - pointB.y) * (pointA.y - pointB.y))
}

function arc(center, from, to, fill) {
  if (hypot(center, from) == hypot(center, to))
    radius = hypot(center, from);
  else 
    return false;
  var arch …

我正在开发一个d3.js项目,我正在显示一些高度相同的矩形.矩形连接到a input[type=number],调整每组矩形的高度.为了使动画更容易(所以我只需要操作svg:defs数字输入的onchange),我希望能够用这样的svg:def标记指定一组矩形的高度:

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500);
svg.append("defs").selectAll(".rectdef")
  .data(data).enter()
  .append("rect")
  .attr("class", "rectdef")
  .attr("id", function (d, i){return "rect" + d.name;})
  .attr("x", 0)      // overridden below
  .attr("width", 0)  // overridden below
  .attr("y", 0)      // overridden below
  .attr("height", function (d, i){return d.height});

然后能够用这样的方式改进矩形的放置x,y和宽度:

svg.selectAll(".bar")
  .data(data).enter()
  .append("use")
  .attr("class", "bar")
  .attr("xlink:href",function (d){return "#rect"+d.type;})
  .attr("x", function(d) { return d.x })
  .attr("width", function (d) {return d.w;})  // this does NOT adjust width!
  .attr("y", function (d) {return 0;});

此代码段正确更改了x和y坐标,但它没有正确更改宽度!任何想法在这里有什么问题？这是浏览器问题(我使用的是Chrome 24.0.1312.52)吗？在svg:use标签上宽度不能像这样编辑吗？ …

无论如何，可以从样式表中更改此文本的x值吗？

<text class =“ jqx-chart-axis-text” x =“ 7” y =“ 11” width =“ 50” height =“ 37” cursor =“ default”> 70000

这是一个jsfiddle,演示了我在说什么:

http://jsfiddle.net/jononomo/yG45J/7/

<div class='div-for-svg'>
    <svg id='blue-border-svg'></svg>
    <svg id='green-border-svg'></svg>    
</div>

.div-for-svg {
    margin: 10px;
    padding: 10px;
    border: 2px dotted red;
    height: 200px;
    width: 200px;
    background-color: yellow;
}

#blue-border-svg {
    border: 2px solid blue;
    margin: 0px;
    padding: 0px;
}

#green-border-svg {
    border: 2px solid green;
    margin: 0px;
    padding: 0px;
}

我希望两个SVG元素在彼此之上和之下,它们之间没有空白区域.就目前而言,顶部SVG元素的底部蓝色边框下方和底部SVG元素的顶部绿色边框上方有明显的空间.我怎样才能摆脱这个空间,为什么它首先出现在那里？另外,SVG元素是否具有默认的高度和宽度？