相关疑难解决方法(0)

人们仍然使用旧的HTML图像地图吗？那些:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

还是有更新,更好的选择？

这可能吗？以下是我尝试过但它完全用黑色填充圆圈.

<svg id='vizMenu' width="700" height="660">
    <defs>
        <filter id="dropshadow" height="130%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> 
            <feOffset dx="0.5" dy="0.8" result="offsetblur"/> 
            <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <circle id='top' filter="url(#dropshadow)" cx="180" cy="120" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='bottom' filter="url(#dropshadow)" cx="500" cy="300" r="80" stroke="#2E2E2E" stroke-width="2" fill="url('images/word-cloud.png')"/>
    <circle id='extra' filter="url(#dropshadow)" cx="180" cy="560" r="80" stroke="#2E2E2E" stroke-width="2" fill="#ffffff"/>
</svg>

我的目标是使用d3将图像添加到现有圆圈中.圆圈将呈现并与鼠标悬停方法交互,但仅当我使用"填充","颜色",而不是像.append("image")那样更复杂的东西.

      g.append("circle")
         .attr("class", "logo")
         .attr("cx", 700)
         .attr("cy", 300)
         .attr("r", 10)
         .attr("fill", "black")       // this code works OK
         .attr("stroke", "white")     // displays small black dot
         .attr("stroke-width", 0.25)
         .on("mouseover", function(){ // when I use .style("fill", "red") here, it works 
               d3.select(this)        
                   .append("svg:image")
                   .attr("xlink:href", "/assets/images/logo.jpeg")
                   .attr("cx", 700)
                   .attr("cy", 300)
                   .attr("height", 10)
                   .attr("width", 10);
         });

鼠标悬停后图像不显示.使用Ruby on Rails应用程序,我的图像"logo.jpeg"存储在assets/images /目录中.有什么帮助让我的徽标显示在圈内？谢谢.

我一直在使用Raphael JS(......很棒).我只是想了解如何在我background-imagebackground-size 用Raphael创建的SVG路径中添加和(封面).这是可能吗？

我尝试过的:

1. 我已经尝试添加一个类,但它将它添加到SVG(路径的父),所以我也尝试过 svg path {//background properties, including the image I want to include;}

2. 我也研究过模式,但是我的输出没有我想要的背景属性,因为我不知道如何用模式设置它们(background-image: //;和background-size: //;).

现行守则(拉斐尔)

function myFunction() {
    var paper = Raphael("drama", 400,400);
    var c = paper.path("M24,48 L313,12L342,174L98,280Z").attr({fill: "url('../imgs/screen.png')", stroke: "none"});
}

目前的拉斐尔输出

<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" …

我想做一些非常类似于填充SVG路径元素和背景图像的东西,除了那里提供的解决方案将平铺图像以填充整个背景区域.我不希望这样.如果图像没有填满整个高度或整个宽度,那么我只是喜欢它在路径形状中居中并让它成为那样.如果我尝试通过更改高度/宽度属性来限制行为,则渲染只会缩放图像,直到它填充至少一个维度.

我猜这种行为有点意义,因为它使用模式.我可以看到我想要的并不是一个真正的"模式"本身.我只是想在我的形状中间拍一张图像,而不是制作一个图案.但是,我希望每当图像的大小超过这些边界时,我的SVG路径定义的形状边界就会切断图像的渲染.除了使用fill属性的模式之外,我不知道除了该问题的答案之外的其他行为.

在类似的问题中:将背景图像(.png)添加到SVG圆形状,最底层的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标.但是,当我尝试这样做时,在渲染过程中不考虑实际的形状.渲染图像时不考虑形状边界,这看起来几乎没用.

在SVG中是否有任何方法可以获得类似模式的背景图像行为,但实际上没有将图像平铺成模式？

是否可以在d3中制作树图,每个矩形的背景是图像？我在寻找类似的什么在Silverlight做了这里,但D3.如果可能,是否有任何推荐的教程贯穿将背景连接到图像的过程？

我想做一些类似于这个带有背景图像的Fill SVG路径元素

但是,我想移动/偏移图像.使用CSS,它可以通过设置background-image和轻松完成background-position.我如何使用SVG？

我正在使用使用传单api的应用程序.

介绍

我需要绘制不同类型的栅栏,使用装饰器我可以在一定程度上对折线应用良好的视觉效果,但不是很多.

问题

我愿意显示扭曲的线而不是破折号,点或平线,我知道绞线将是一个图像,但无法找到有关将自定义css应用于折线的帮助.

脚本示例

         var fence2Icon = L.icon({
                            iconUrl: 'xxxx.png',
                            iconSize: [5, 20]
                            iconAnchor: [5, 18]
                        });

                        // Add coordinate to the polyline
                        var polylineFence2 = new L.Polyline([], { color: 'red' });
                    function fencePlace2(e) {
                        // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
                        // Add coordinate to the polyline
               polylineFence2.addLatLng(e.latlng).addTo(curr);
            var decorator = L.polylineDecorator(polylineFence2, {
            patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
                         }]
                    }).addTo(curr);
                    }    

                L.easyButton('fa-flash', function () {
                            $('.leaflet-container').css('cursor', 'crosshair');
                            map.on('click', fencePlace2); …

我在React中使用SVG,但是ReactJS允许的SVG标签数量 有限,我没有看到<image/>在我的JSX中嵌入SVG标签的方法.

我也尝试将一组fill样式rect用于图像的网址,但它也不起作用.这有解决方法吗？

我想要有边界的明星.如何在clippath中显示边界？

<svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;">
  <defs>
    <clipPath id="clipping">
      <polygon points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" />
    </clipPath>
  </defs>
</svg>

示例:http://codepen.io/neilhem/pen/VYdeaQ

是否可以在svg或css中获得文本背景？这意味着,每个角色都有背景？这是一个例子:

我已经在photoshop中做了这个并制作了一个面具,我只是想知道我有可能在svg或css？

我想通过收集4个小三角形来制作一个图像背景三角形,就像这个图像一样

如何制作这个三角形图像背景形状的集合？!

.block {
    width: 0;
    height: 0;
    border: solid 20px;    
    float: left;
}
.clear {
    clear: both;
}
.top {
    margin-left: 38px;
}
.top .left {    
    border-color: transparent green green transparent;
}
.top .right {    
    border-color: transparent transparent green green;
}
.bottom .left1 {    
    border-color: transparent red red transparent;
}
.bottom .mid1 {    
    border-color: blue blue red red;
}
.bottom .mid2 {    
    border-color: blue purple purple blue;
}
.bottom .right1 {    
    border-color: transparent transparent purple purple;
}

<div class="top"> …

所以我有两个我在Photoshop中创建的SVG图像.图像具有彼此相邻的所有正确尺寸,但是当我将它们导出时它们不重叠.以下是两张图片(对不起尺码):

我已将它们作为SVG导出,然后将代码放在我的index.html页面中.看起来像:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAABQIA ..." />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="600" height="862" viewBox="0 0 600 862">
  <image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8EAAAT7CAMAAACJ ..." />
</svg>

对不起,我必须创建一个要点,因为我的图像是base64编码所以它们很大:

完整代码

问题:Photoshop中的背景是透明的.但是它们彼此重叠到一个隐藏另一个的点.如何让我的两个SVG图像相互重叠但两个都可见？