小编Pau*_*eau的帖子

我VectorDrawable手动或使用网络工具进行了相反的转换(SVG ).

但我很难做相反的事情.我有,VectorDrawable但我不知道如何将其转换为SVG,我可以找到零在线工具来做到这一点.

有没有人有这方面的经验,有哪些步骤或工具呢？

我决定为我的一个项目切换到svg符号 - 但需要它们才能响应.主要的想法是不要有多个http请求,所以我想将所有SVG合并到一个SVG中,定义符号并按如下方式使用它们:

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

这是一个jsfiddle,检查IE中的不同行为(我检查了11但是读了9也有多个问题):http: //jsfiddle.net/ws472q71/

对于我的生活,我无法让它正常工作.上面的代码在Firefox和Chrome中正常运行,但在IE中失败.我读到了有关IE问题的内容,但我找不到任何可行的内容.

我究竟做错了什么？

是否有任何其他类似的解决方案可以将SVG合并到一个文件中并将它们用作响应式图像？

谢谢!

你能不能看一下这个演示,让我知道如何在不同坐标的画布上绘制多个圆圈,而不重复一堆代码？

正如你在Demo和代码中看到的那样

var ctx = $('#canvas')[0].getContext("2d");
ctx.fillStyle = "#00A308";
ctx.beginPath();
ctx.arc(150, 50, 5, 0, Math.PI * 2, true);
ctx.arc(20, 85, 5, 0, Math.PI * 2, true);
ctx.arc(160, 95, 5, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();

我尝试将它们放在下面,ctx但它不正确,所以我尝试使用for循环创建50个点,但我有重复和添加代码的问题,如ctx.fill(); 对于他们所有人.你能告诉我怎么解决这个问题吗？

谢谢

我想在我的启动画面中显示一个 VectorDrawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:color/white"
        android:gravity="fill" />

    <item
        android:drawable="@drawable/splash_screen"
        android:gravity="bottom|center" />
</layer-list>

我的 SVG 有android:width="320dp"和android:height="238dp"

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="320dp"
    android:height="238dp"
    android:viewportWidth="320"
    android:viewportHeight="238">
  <group>
    <clip-path android:pathData="M0,0h320v238h-320z M 0,0"/>
    <path
        android:pathData="M0,143.311a160,4.476 0,1 0,320 0a160,4.476 0,1 0,-320 0z"
        android:fillColor="#E6E6E6"/>
    <path
        android:pathData="M245.269,94.815C245.067,94.818 244.865,94.821 244.66,94.821C244.455,94.821 244.253,94.818 244.051,94.815C233.341,94.572 225.578,87.88 227.554,80.859L232.372,63.73L233.59,59.396L255.177,59.764L256.488,64.004L261.653,80.693C263.839,87.753 256.076,94.572 245.269,94.815Z"
        android:fillColor="#3F3D56"/>
    <path
        android:pathData="M256.488,64.004C248.993,68.288 239.768,68.184 232.372,63.73L233.59,59.396L255.177,59.764L256.488,64.004Z"
        android:strokeAlpha="0.2"
        android:fillColor="#000000"
        android:fillAlpha="0.2"/>
    <path
        android:pathData="M255.577,81.427C256.51,77.952 259.575,72.938 268.17,66.893C283.16,56.35 274.218,48.444 273.83,48.113C273.017,47.418 273.137,46.638 274.109,46.371C275.252,46.143 276.437,46.419 277.361,47.128C277.846,47.529 289.044,57.092 272.129,68.988C256.906,79.695 260.142,86.685 260.179,86.752C260.587,87.499 259.933,88.097 258.717,88.089C257.501,88.081 256.183,87.469 255.774,86.723C255.688,86.565 254.709,84.662 255.577,81.427Z" …

我对svg绘图不够熟悉.

我有SVG格式的箭头.如何增加箭头的厚度？

<div style="width: 100px; height:100px;">
  <svg viewBox="0 0 100 100">
    <path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" class="arrow" transform="translate(85,100) rotate(180)"></path>
  </svg>
</div>

提前致谢

我用我拥有的路径数据创建了一个VectorDrawable文件.但问题是图像没有在整个区域的中心对齐,而是创建为左上对齐.看一看:

文件:

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7.144375,6.49965789 L13.196575,0.583973684 C13.333075,0.450552632 13.333075,0.233657895 13.196575,0.0995526316 C13.060075,-0.0331842105 12.838175,-0.0331842105 12.701675,0.0995526316 L6.649475,6.01592105 L0.596575,0.0995526316 C0.460775,-0.0331842105 0.238875,-0.0331842105 0.102375,0.0995526316 C-0.034125,0.233657895 -0.034125,0.450552632 0.102375,0.583973684 L6.154575,6.49965789 L0.102375,12.4153421 C-0.034125,12.5487632 -0.034125,12.7656579 0.102375,12.8997632 C0.170975,12.9661316 0.260575,12.9989737 0.350175,12.9989737 C0.439775,12.9989737 0.529375,12.9654474 0.597975,12.8997632 L6.650175,6.98339474 L12.702375,12.8997632 C12.770975,12.9661316 12.860575,12.9989737 12.950175,12.9989737 C13.039775,12.9989737 13.129375,12.9654474 13.197975,12.8997632 C13.334475,12.7656579 13.334475,12.5487632 13.197975,12.4153421 L7.145775,6.49965789 L7.144375,6.49965789 Z" />

</vector>

现在检查当使用app:srcCompat for imageView时它的实际外观.

有没有办法解决这个问题,因为我对VectorDrawables没有太多经验？

任何形式的帮助将不胜感激.

编辑:这是我如何使用矢量drawable.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/close_button"/>

我是第一次使用EclipseLink构建一个新的应用程序.

一切都没问题,直到我添加了一个使用JSR310 Instant作为时间戳列的实体.

所以我创建了一个转换器类并将其映射到相关字段,如下所示:

@Convert(converter = JSR310InstantTypeConverter.class)
private Instant   pwdChangeCodeExpiresOn = null;

但是,由于我添加了转换器,应用程序已开始抛出以下异常:

SEVERE: Servlet.service() for servlet [APIJerseyServlet] in context with path [/Sclera] threw exception [org.glassfish.jersey.server.ContainerException: java.lang.ExceptionInInitializerError] with root cause
Local Exception Stack: 
Exception [EclipseLink-7351] (Eclipse Persistence Services - 2.5.1.v20130918-f2b9fc5): org.eclipse.persistence.exceptions.ValidationException
Exception Description: The converter class [com.sclera.utils.JSR310InstantTypeConverter] specified on the mapping attribute [pwdChangeCodeExpiresOn] from the class [com.sclera.entity.Admin] was not found. Please ensure the converter class name is correct and exists with the persistence unit definition.
    at org.eclipse.persistence.exceptions.ValidationException.converterClassNotFound(ValidationException.java:2317)
    at org.eclipse.persistence.internal.jpa.metadata.converters.ConvertMetadata.process(ConvertMetadata.java:248)

这将在代码更改后开始发生(当Eclipse重新启动服务器时).我必须手动停止并启动(和/或重新启动)服务器几次,直到它最终再次开始工作.然后它将正常工作,直到代码更改或两个以后它将再次开始抛出异常. …

我正在 Android 上处理 SVG 文件。Android Studio 将 SVG 文件转换为包含矢量和路径元素的 XML 文件。一个 XML 文件可以有多个“路径”元素。问题就从这里开始。我想让每个路径元素能够在不使用 webview 的情况下单独单击。（javascript 的原因是有风险的！）有没有办法做到这一点？

我不能使用点击像素颜色。因为它们变化很大。我可以将每个路径元素分离到不同的 XML 文件。但是这条路径也会记住它们所在的位置。当我想将每个 XML 文件添加到 FrameLayout 中时，它们将矩形边缘扩展到手机边缘。即使他们在 width 和 height 属性中有 wrap_content .. 所以 onClick 事件被阻止。onClick 事件只有一个。您可以检查照片中的蓝色边缘。每个图像视图的蓝色边缘都相同：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/path_one" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/path_two" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/path_three" />
</FrameLayout>

路径一：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="800dp"
    android:height="340dp"
    android:viewportHeight="340"
    android:viewportWidth="800">
    <path
        android:fillAlpha="1"
        android:fillColor="#da241c"
        android:pathData="M52.39,44.01L54.63,41.94L57.68,42.54L64.66,41.57L66.41,42.87L67.51,45.88L72.34,49.65L75.51,48.5L78.38,45.54L80.04,39.15L82.2,37.29L88.55,34.96L92.09,34.57L100.5,29.58L100.87,28.25L102.52,28.39L102.52,28.39L103.01,29L103.01,29L99.86,44.65L97.47,48.72L97.49,51.15L95.74,54.66L95.58,57.53L96.47,59.49L96.47,59.49L94.92,62.8L91.57,62.71L86.49,60.02L76.48,62.25L74.69,65.68L74.09,69.27L69.49,73.59L67.58,77.44L62.61,81.12L57.04,82.69L54.94,84.99L52.22,85.67L52.22,85.67L52.17,82.72L55.49,74.92L52.38,73.87L46.42,74.15L46.42,74.15L42.46,68.99L43.56,60.73L41.5,58.83L42.36,57.78L46.69,57.12L50.78,53.06L53.17,48.89z"
        android:strokeAlpha="1"
        android:strokeColor="#FFFFFF"
        android:strokeWidth="0.5" />
</vector>

路径二：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="800dp"
    android:height="340dp" …

我试图从左到右动画一个箭头.我的箭头路径的代码如下:

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'> 
    <g transform = "translate(0,0)"> 
      <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1"> 
          <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
      </path>
    </g>
</svg>

以上是我箭头的svg路径内容.

请有人帮我如何从左到右填充路径.等待快速反应

我试图用鼠标旋转SVG路径.小提琴.但我几乎没有问题,

1. 轮换的起源是错误的
2. 当我停止旋转并再次旋转时,它从不同的起始角度开始,而不是从前一个角度开始.
3. 不确定如何更新circle旋转后的位置.

代码在这里:

var svgns = 'http://www.w3.org/2000/svg';
var path = document.getElementById('path-element');
var angle = 0;
function getRotationPoint() {
  var bRect = path.getBoundingClientRect();
  var rotationPoint = [bRect.left + (bRect.width / 2), bRect.top - 20];
  return rotationPoint;
}
var rotationPoint = getRotationPoint();
var circle = document.createElementNS(svgns, 'circle');
circle.setAttribute('style', 'fill: #DCDCDC; stroke: red; stroke-width: 2; pointer-events: visiblePainted');
circle.setAttribute('cx', rotationPoint[0]);
circle.setAttribute('cy', rotationPoint[1]);
circle.setAttribute('r', 4);
document.querySelector('svg').appendChild(circle);

var mousedown = false, mouse_start = null;

circle.addEventListener('mousedown', function(event) {
  mousedown = true; …