我如何填充SVG形状,而不是单色,图像或渐变,但如果可能的话,使用阴影图案,对角线.
已经2个小时了,我什么都没发现(至少在2005年之后).
我认为一个可能的黑客将是一个孵化的PNG,可以作为填充,但这并不理想.
我正在background-image为一个伪元素设置一个SVG :
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 620 12" enable-background="new 0 0 620 12" xml:space="preserve"><g><polygon fill="#D11A3C" points="48.8,12 0,12 0,0 54.1,0"/><polygon fill="#952592" points="93.8,12 44,12 49.3,0 99.1,0"/><polygon fill="#1E65AF" points="133.5,12 83.7,12 89,0 138.8,0"/><polygon fill="#D11A3C" points="156.3,12 106.5,12 111.8,0 161.6,0"/><polygon fill="#40BFC2" points="201,12 151.3,12 156.5,0 206.3,0"/><polygon fill="#1E65AF" points="216.4,12 166.6,12 171.9,0 221.7,0"/><polygon fill="#952592" points="226.5,12 176.7,12 182,0 231.7,0"/><polygon fill="#1E65AF" points="241.3,12 191.5,12 196.8,0 246.6,0"/><polygon fill="#40BFC2" points="260.9,12 211.1,12 216.4,0 …我有一个(组)中的svg <rect>,<g>我想缩放它,然后将其翻译为视口的百分比.svg中的大多数内容都允许通过一系列荒谬的选项来指定单位; 例如px,em,%,ex,pt,pc,......但似乎翻译中指定的数字只是像素.
事情是,如果我必须返回并重新计算翻译的像素值,那么我的svg将依赖于分辨率.然后我,你和每个人都会陷入悖论.你可以看出为什么我有点担心.
<svg>
<g transform="scale(1, 1) translate(0, 0)">
<rect x="45%" y="25%" height="50%" width="10%"/>
</g>
</svg>
我在SVG中绘制文本标签.我有一个固定的宽度(比如200px).当文字太长时,我该如何修剪呢？
理想的解决方案还会添加文本被剪切的省略号(...).但我也可以没有它.
我正在使用jspdf将图像转换为PDF.
我已使用base64encode将图像转换为URI.但问题是控制台中没有显示错误或警告.
生成带有文本Hello World的PDF但不添加任何图像.
这是我的代码.
function convert(){
var doc = new jsPDF();
var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg');
console.log(imgData);
doc.setFontSize(40);
doc.text(30, 20, 'Hello world!');
doc.output('datauri');
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
}
我试图<hr>用SVG 复制一个.现在,使用SVG制作一条直线可以完美地工作,但是第二个我用渐变划线它将不再以直线显示.
以下代码有效,但请注意,y1和y2必须相隔1个单位.例如,如果我将y1和y2设置为210,则该行将消失.
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
<stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
</linearGradient>
</defs>
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" />
我可能只是错过了线性渐变的一些明显功能,而且线条看起来还不错,但我更倾向于让它笔直.谢谢.
我在http://oauth.net/上读过一些关于它的内容,它显然是"发布受保护数据和与受保护数据交互的简单方法".
我认为这正是我需要通过REST Web服务提供从android/iphone应用程序访问数据的安全方式,但我无法确切地知道它是什么.
所以,简单地说,它究竟做了什么,是否有任何(真的)简单的例子,我可以遵循它,最好在c#中实现可以从智能手机应用程序访问的东西？
我正在尝试使用此处详述的"符号"方法使用SVG精灵表.
http://css-tricks.com/svg-sprites-use-better-icon-fonts/
我的HTML非常简单.
<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>
这是SVG文件中的示例符号
<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 …我有内联SVG对齐的问题.我创建了一个带有一些文本和SVG的按钮.当SVG高度小于文本时,当SVG至少与文本一样大时,对齐正常工作.
我创建了一个带有双色背景按钮的测试用例,以指示中间的确切位置.您可以看到,如果您仔细观察第二种情况并未完全对齐,因为SVG的高度小于文本中的高度.
有没有什么办法解决这一问题？做其他方式(请不要js)？
测试用例:https://goo.gl/KYDKGH
当我运行此代码时,它向我显示一个空白屏幕但是当我使用chrome中的开发人员工具更新代码时,它会显示数据.请帮助解释为什么它显示我使用chrome的开发人员工具更新代码的时候,是因为浏览器再次运行DOM,如果是,那么为什么不在第一次显示它时.这是否由于foreignObject而发生.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg id="t">
<g>
<text x="10" y="10">hello</text>
</g>
</svg>
<script>
var s = document.getElementById('t');
var g = s.childNodes[1];
console.log(g.childNodes[1].remove());
var foreign = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
foreign.setAttribute('width', 500);
foreign.setAttribute('height', 150);
var txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
txt.setAttribute('x', '10');
txt.setAttribute('y', '10');
var t = document.createTextNode("This is a paragraph.");
txt.appendChild(t);
foreign.appendChild(txt);
g.appendChild(foreign);
</script>
</body>
</html>