相关疑难解决方法(0)

使用背景图像填充SVG路径元素

是否可以background-image为SVG <path>元素设置？

例如,如果我设置元素class="wall",CSS样式.wall {fill: red;}可以工作,但.wall{background-image: url(wall.jpg)}不会.wall {background-color: red;}.

html css svg image background-image

jbo*_*chi

2017 10-13

157
推荐指数

2
解决办法

18万
查看次数

如何使用D3.js将图像添加到svg容器

我已经创建了一个示例Asp.Net MVC 4应用程序,其中我使用D3.js附加一个SVG元素,然后在SVG中我附加了一个文本元素(参见下面的代码).这一切都正常,直到我尝试使用本地png文件将img附加到SVG.img会附加到DOM,但img不会在页面上呈现.我在这里做错了什么想法,以及如何修复它？

@{
    ViewBag.Title = "Home Page";
}

<script src="~/Scripts/d3.v3.js"></script>
<script type="text/javascript">
    var svg = d3.select("body")
        .append("svg")
        .attr("width", 200)
        .attr("height", 100)
        .style("border", "1px solid black");

    var text = svg.selectAll("text")
        .data([0])
        .enter()
        .append("text")
        .text("Testing")
        .attr("x", "40")
        .attr("y", "60");

    var imgs = svg.selectAll("img").data([0]);
    imgs.enter()
        .append("img")
        .attr("xlink:href", "@Url.Content("~/Content/images/icons/refresh.png")")
        .attr("x", "60")
        .attr("y", "60")
        .attr("width", "20")
        .attr("height", "20");

</script>

Run Code Online (Sandbox Code Playgroud)

@Richard Marr - 下面是尝试在直接HTML中做同样的事情,这给了我相同的结果.我不确定我的代码以这种方式从本地驱动器获取refresh.png文件.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://d3js.org/d3.v2.js"></script>

    </head>
    <body>
        <script type="text/javascript">
            var svg = d3.select("body")
                .append("svg")
                .attr("width", 200)
                .attr("height", …

Run Code Online (Sandbox Code Playgroud)

javascript svg d3.js asp.net-mvc-4

Rus*_*ark

2013 01-29

43
推荐指数

3
解决办法

9万
查看次数

svg + Sprite sheet + d3 + clipPath + position + size

需要提前道歉:长度和我的无知.我正在尝试自学新概念:d3.js和精灵表.精灵表概念很容易理解,但我很困惑如何将它整合到d3中.基本上我想要做的是从精灵表中选择我想用作图像的精灵,然后使用d3在页面上的其他地方显示这个选定的精灵,并且很可能是同一精灵的多个副本.

实际的精灵表供参考(见下文免责声明): 示例图标请参阅以下免责声明

以下是问题:1)我将精灵表添加到我的html中,硬编码<clipPath>现在,这显示了我想要的特定精灵,但是,精灵的尺寸/位置就像显示整个精灵表一样.我怎样才能"捕捉"精灵本身,而不仅仅是隐藏未使用的精灵？在下图中,我想在d3鼠标悬停事件中使用单个"图标"(第2部分).

修改此示例:SO:在不使用foreignObject的情况下在SVG中显示CSS图像精灵

HTML

<svg id="mySvg1" width="100%" height="100%">
    <defs>
        <clipPath id="c">
            <rect x="135" y="0" width="150" height="150"/>
        </clipPath>
    </defs>
        <image transform="scale(1.0)" x="0" y="0" width="550" height="420" xlink:href="static/img/iconSheet.png" clip-path="url(#c)"/>
<svg>

Run Code Online (Sandbox Code Playgroud)

结果

使用clipPath

2)我可以<pattern>用来确定要在d3对象/事件中显示的图像.就像在矩形中显示图形一样.但这似乎不适用于大型图像(精灵表)？如果我尝试使用精灵表本身及其在模式中的原生尺寸,它会变得奇怪和模糊.如果我们解决第1部分,我们可能会忽略第2部分,但是对于一般知识/将来的使用,这将是很好的理解.

修改此示例:SO:在d3 javascript中在圆形对象中添加图像？

HTML

<svg id="mySvg" width="550" height="420">
  <defs id="mdef">
    <pattern id="image" x="0" y="0" height="550" width="420">
      <image transform="scale(1.0)" x="0" y="0" width="550" height="420" xlink:href="static/img/iconSheet.png"></image>
    </pattern>
  </defs>
</svg>

Run Code Online (Sandbox Code Playgroud)

使用Javascript:

var svgContainer = d3.select("div#content-main").append("svg")
                                    .attr("width", 740)
                                    .attr("height", 760)
                                    .attr("class", "mySvg")
                                    .style("border", "none");

svgContainer.append("rect")
         .attr("class", "logo")
         .attr("x", 0)
         .attr("y", …

Run Code Online (Sandbox Code Playgroud)

javascript svg sprite-sheet d3.js

Jam*_*mes

2017 05-23

7
推荐指数

1
解决办法

2929
查看次数